<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
  <meta name="theme-color" content="#222">
  <meta name="generator" content="Hexo 5.4.0">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

  <link rel="stylesheet" href="/css/main.css">



  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.2/css/all.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.1.1/animate.min.css">

  <script class="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {
      "hostname": "holidaypenguin.gitee.io",
      "root": "/",
      "images": "/images",
      "scheme": "Mist",
      "version": "8.2.2",
      "exturl": false,
      "sidebar": {
        "position": "right",
        "display": "always",
        "padding": 18,
        "offset": 12
      },
      "copycode": true,
      "bookmark": {
        "enable": false,
        "color": "#222",
        "save": "auto"
      },
      "fancybox": false,
      "mediumzoom": false,
      "lazyload": false,
      "pangu": false,
      "comments": {
        "style": "tabs",
        "active": null,
        "storage": true,
        "lazyload": false,
        "nav": null
      },
      "motion": {
        "enable": true,
        "async": true,
        "transition": {
          "post_block": "fadeIn",
          "post_header": "fadeInDown",
          "post_body": "fadeInDown",
          "coll_header": "fadeInLeft",
          "sidebar": "slideUpIn"
        }
      },
      "prism": false,
      "i18n": {
        "placeholder": "搜索...",
        "empty": "没有找到任何搜索结果：${query}",
        "hits_time": "找到 ${hits} 个搜索结果（用时 ${time} 毫秒）",
        "hits": "找到 ${hits} 个搜索结果"
      },
      "path": "/search.xml",
      "localsearch": {
        "enable": true,
        "trigger": "auto",
        "top_n_per_article": 1,
        "unescape": false,
        "preload": false
      }
    };
  </script>
  <meta property="og:type" content="article">
  <meta property="og:title" content="深入理解JavaScript26个核心概念">
  <meta property="og:url" content="https://holidaypenguin.gitee.io/blob/2020-09-29-understanding-26-core-concepts-of-javascript/index.html">
  <meta property="og:site_name" content="HolidayPenguin">
  <meta property="og:locale" content="zh_CN">
  <meta property="og:image" content="https://visitor-badge.glitch.me/badge?page_id=holidaypenguin.gitee.io/">
  <meta property="og:image" content="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1031beb340cb4fb6a12619070ee2ba75~tplv-k3u1fbpfcp-zoom-1.image">
  <meta property="og:image" content="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ecffe0562ed64189a5ab84d0af33f8d5~tplv-k3u1fbpfcp-zoom-1.image">
  <meta property="og:image" content="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3e717aaf59e648ce94a36e3d87242b14~tplv-k3u1fbpfcp-zoom-1.image">
  <meta property="og:image" content="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f1b4653558614231986339f66d85c921~tplv-k3u1fbpfcp-zoom-1.image">
  <meta property="og:image" content="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fd5fc571b47e42e6bdcce3e116f22ae0~tplv-k3u1fbpfcp-zoom-1.image">
  <meta property="og:image" content="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/369763c6cb6d47bcae20146cca445470~tplv-k3u1fbpfcp-zoom-1.image">
  <meta property="og:image" content="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8eb99043b5c2426ea25fe3ea31300f6a~tplv-k3u1fbpfcp-zoom-1.image">
  <meta property="article:published_time" content="2020-09-29T07:18:21.000Z">
  <meta property="article:modified_time" content="2020-09-29T07:18:21.000Z">
  <meta property="article:author" content="holidaypenguin">
  <meta property="article:tag" content="JavaScript">
  <meta name="twitter:card" content="summary">
  <meta name="twitter:image" content="https://visitor-badge.glitch.me/badge?page_id=holidaypenguin.gitee.io/">


  <link rel="canonical" href="https://holidaypenguin.gitee.io/blob/2020-09-29-understanding-26-core-concepts-of-javascript/">


  <script class="page-configurations">
    // https://hexo.io/docs/variables.html
    CONFIG.page = {
      sidebar: "",
      isHome: false,
      isPost: true,
      lang: 'zh-CN'
    };
  </script>
  <title>深入理解JavaScript26个核心概念 | HolidayPenguin</title>





  <noscript>
    <style>
      body {
        margin-top: 2rem;
      }

      .use-motion .menu-item,
      .use-motion .sidebar,
      .use-motion .post-block,
      .use-motion .pagination,
      .use-motion .comments,
      .use-motion .post-header,
      .use-motion .post-body,
      .use-motion .collection-header {
        visibility: visible;
      }

      .use-motion .header,
      .use-motion .site-brand-container .toggle,
      .use-motion .footer {
        opacity: initial;
      }

      .use-motion .site-title,
      .use-motion .site-subtitle,
      .use-motion .custom-logo-image {
        opacity: initial;
        top: initial;
      }

      .use-motion .logo-line {
        transform: scaleX(1);
      }

      .search-pop-overlay,
      .sidebar-nav {
        display: none;
      }

      .sidebar-panel {
        display: block;
      }
    </style>
  </noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner">
        <div class="site-brand-container">
          <div class="site-nav-toggle">
            <div class="toggle" aria-label="切换导航栏" role="button">
              <span class="toggle-line"></span>
              <span class="toggle-line"></span>
              <span class="toggle-line"></span>
            </div>
          </div>

          <div class="site-meta">

            <a href="/" class="brand" rel="start">
              <i class="logo-line"></i>
              <h1 class="site-title">HolidayPenguin</h1>
              <i class="logo-line"></i>
            </a>
          </div>

          <div class="site-nav-right">
            <div class="toggle popup-trigger">
              <i class="fa fa-search fa-fw fa-lg"></i>
            </div>
          </div>
        </div>



        <nav class="site-nav">
          <ul class="main-menu menu">
            <li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a></li>
            <li class="menu-item menu-item-tags"><a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a></li>
            <li class="menu-item menu-item-categories"><a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a></li>
            <li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a></li>
            <li class="menu-item menu-item-search">
              <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
              </a>
            </li>
          </ul>
        </nav>



        <div class="search-pop-overlay">
          <div class="popup search-popup">
            <div class="search-header">
              <span class="search-icon">
                <i class="fa fa-search"></i>
              </span>
              <div class="search-input-container">
                <input autocomplete="off" autocapitalize="off" maxlength="80" placeholder="搜索..." spellcheck="false" type="search" class="search-input">
              </div>
              <span class="popup-btn-close" role="button">
                <i class="fa fa-times-circle"></i>
              </span>
            </div>
            <div class="search-result-container no-result">
              <div class="search-result-icon">
                <i class="fa fa-spinner fa-pulse fa-5x"></i>
              </div>
            </div>

          </div>
        </div>

      </div>


      <div class="toggle sidebar-toggle" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
      </div>

      <aside class="sidebar">

        <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
          <ul class="sidebar-nav">
            <li class="sidebar-nav-toc">
              文章目录
            </li>
            <li class="sidebar-nav-overview">
              站点概览
            </li>
          </ul>

          <div class="sidebar-panel-container">
            <!--noindex-->
            <div class="post-toc-wrap sidebar-panel">
              <div class="post-toc animated">
                <ol class="nav">
                  <li class="nav-item nav-level-1"><a class="nav-link" href="#%E7%AE%80%E4%BB%8B"><span class="nav-number">1.</span> <span class="nav-text">简介</span></a></li>
                  <li class="nav-item nav-level-1"><a class="nav-link" href="#%E7%B3%BB%E5%88%97%E9%A2%84%E5%91%8A"><span class="nav-number">2.</span> <span class="nav-text">系列预告</span></a></li>
                  <li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%A4%87%E6%B3%A8"><span class="nav-number">3.</span> <span class="nav-text">备注</span></a></li>
                  <li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%AD%A3%E6%96%87%EF%BC%9A"><span class="nav-number">4.</span> <span class="nav-text">正文：</span></a>
                    <ol class="nav-child">
                      <li class="nav-item nav-level-2"><a class="nav-link" href="#1-js%E8%BF%90%E8%A1%8C%E7%8E%AF%E5%A2%83"><span class="nav-number">4.1.</span> <span class="nav-text">1.js运行环境</span></a>
                        <ol class="nav-child">
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#1-1%E5%B8%B8%E8%A7%81%E7%9A%84%E5%86%85%E6%A0%B8%EF%BC%9A"><span class="nav-number">4.1.1.</span> <span class="nav-text">1.1常见的内核：</span></a></li>
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#1-2-%E7%8E%B0%E5%9C%A8%E6%88%91%E4%BB%AC%E6%9C%89%E4%B8%80%E4%B8%AAjs%E6%96%87%E4%BB%B6%EF%BC%8C%E9%82%A3%E4%B9%88%E6%B5%8F%E8%A7%88%E5%99%A8%E6%98%AF%E5%A6%82%E4%BD%95%E6%89%A7%E8%A1%8C%E5%AE%83%E7%9A%84%E5%91%A2%EF%BC%9F"><span class="nav-number">4.1.2.</span> <span class="nav-text">1.2 现在我们有一个js文件，那么浏览器是如何执行它的呢？</span></a></li>
                        </ol>
                      </li>
                      <li class="nav-item nav-level-2"><a class="nav-link" href="#2-js%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B"><span class="nav-number">4.2.</span> <span class="nav-text">2.js数据类型</span></a>
                        <ol class="nav-child">
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#1-typeof"><span class="nav-number">4.2.1.</span> <span class="nav-text">1.typeof</span></a></li>
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#2-instanceof%EF%BC%88%E4%B8%8B%E4%B8%80%E8%8A%82%E6%89%8B%E5%86%99%EF%BC%89"><span class="nav-number">4.2.2.</span> <span class="nav-text">2.instanceof（下一节手写）</span></a></li>
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#3-constructor%EF%BC%9A"><span class="nav-number">4.2.3.</span> <span class="nav-text">3. constructor：</span></a></li>
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#4-Object-prototype-toString-call%EF%BC%88%E6%9C%80%E4%BD%B3%E6%96%B9%E6%A1%88%EF%BC%89"><span class="nav-number">4.2.4.</span> <span class="nav-text">4.Object.prototype.toString.call（最佳方案）</span></a></li>
                        </ol>
                      </li>
                      <li class="nav-item nav-level-2"><a class="nav-link" href="#3-js%E7%B1%BB%E5%9E%8B%E8%BD%AC%E6%8D%A2"><span class="nav-number">4.3.</span> <span class="nav-text">3.js类型转换</span></a>
                        <ol class="nav-child">
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#3-1%E7%BB%8F%E5%85%B8%E9%9D%A2%E8%AF%95%E9%A2%98%EF%BC%9A-%E9%83%BD%E8%83%BD%E7%AD%94%E5%AF%B9%E7%9C%9F%E7%9A%84%E5%BE%88%E5%8E%89%E5%AE%B3%E4%BA%86-%E7%95%99%E4%B8%AA%E5%90%8D%E8%AE%A9%E6%88%91%E5%85%B3%E6%B3%A8%E8%86%9C%E6%8B%9C%E4%B8%80%E4%B8%8B"><span class="nav-number">4.3.1.</span> <span class="nav-text">3.1经典面试题：(都能答对真的很厉害了,留个名让我关注膜拜一下)</span></a></li>
                        </ol>
                      </li>
                      <li class="nav-item nav-level-2"><a class="nav-link" href="#4-js%E9%81%8D%E5%8E%86"><span class="nav-number">4.4.</span> <span class="nav-text">4.js遍历</span></a>
                        <ol class="nav-child">
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#4-1%E5%AF%B9%E8%B1%A1%E9%81%8D%E5%8E%86%EF%BC%9A"><span class="nav-number">4.4.1.</span> <span class="nav-text">4.1对象遍历：</span></a></li>
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#4-2-%E6%95%B0%E7%BB%84%E9%81%8D%E5%8E%86%EF%BC%9A"><span class="nav-number">4.4.2.</span> <span class="nav-text">4.2 数组遍历：</span></a></li>
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#4-3-%E5%AD%97%E7%AC%A6%E4%B8%B2%E9%81%8D%E5%8E%86%EF%BC%9A"><span class="nav-number">4.4.3.</span> <span class="nav-text">4.3 字符串遍历：</span></a></li>
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#4-4-Set%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84"><span class="nav-number">4.4.4.</span> <span class="nav-text">4.4 Set数据结构:</span></a></li>
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#4-5-Map%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%EF%BC%9A"><span class="nav-number">4.4.5.</span> <span class="nav-text">4.5 Map数据结构：</span></a></li>
                        </ol>
                      </li>
                      <li class="nav-item nav-level-2"><a class="nav-link" href="#5-%E4%BD%9C%E7%94%A8%E5%9F%9F%E4%B8%8E%E4%BD%9C%E7%94%A8%E5%9F%9F%E9%93%BE"><span class="nav-number">4.5.</span> <span class="nav-text">5.作用域与作用域链</span></a>
                        <ol class="nav-child">
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#5-1%E4%BD%9C%E7%94%A8%E5%9F%9F"><span class="nav-number">4.5.1.</span> <span class="nav-text">5.1作用域</span></a></li>
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#5-2%E4%BD%9C%E7%94%A8%E5%9F%9F%E9%93%BE"><span class="nav-number">4.5.2.</span> <span class="nav-text">5.2作用域链</span></a></li>
                        </ol>
                      </li>
                      <li class="nav-item nav-level-2"><a class="nav-link" href="#6-%E9%97%AD%E5%8C%85"><span class="nav-number">4.6.</span> <span class="nav-text">6.闭包</span></a></li>
                      <li class="nav-item nav-level-2"><a class="nav-link" href="#7-%E5%8E%9F%E5%9E%8B%E5%8F%8A%E5%8E%9F%E5%9E%8B%E5%AF%B9%E8%B1%A1"><span class="nav-number">4.7.</span> <span class="nav-text">7.原型及原型对象</span></a>
                        <ol class="nav-child">
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%8E%9F%E5%9E%8B%E9%93%BE-%E4%B8%80%E7%A7%8D%E8%AE%BF%E9%97%AE%E6%9C%BA%E5%88%B6-%EF%BC%9A"><span class="nav-number">4.7.1.</span> <span class="nav-text">原型链(一种访问机制)：</span></a></li>
                        </ol>
                      </li>
                      <li class="nav-item nav-level-2"><a class="nav-link" href="#8-this%E6%8C%87%E5%90%91%E9%97%AE%E9%A2%98"><span class="nav-number">4.8.</span> <span class="nav-text">8.this指向问题</span></a>
                        <ol class="nav-child">
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#8-1-%E5%85%A8%E5%B1%80%E7%8E%AF%E5%A2%83-%E6%99%AE%E9%80%9A%E5%87%BD%E6%95%B0%E8%B0%83%E7%94%A8-%E6%99%AE%E9%80%9A%E5%AF%B9%E8%B1%A1"><span class="nav-number">4.8.1.</span> <span class="nav-text">8.1 全局环境 普通函数调用,普通对象</span></a></li>
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#8-2-%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0"><span class="nav-number">4.8.2.</span> <span class="nav-text">8.2 构造函数</span></a></li>
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#8-3-%E5%AF%B9%E8%B1%A1%E6%96%B9%E6%B3%95"><span class="nav-number">4.8.3.</span> <span class="nav-text">8.3 对象方法</span></a></li>
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%89%B9%E6%AE%8A%E6%83%85%E5%86%B5"><span class="nav-number">4.8.4.</span> <span class="nav-text">特殊情况</span></a></li>
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#8-4-%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0prototype%E5%B1%9E%E6%80%A7"><span class="nav-number">4.8.5.</span> <span class="nav-text">8.4 构造函数prototype属性</span></a></li>
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#8-5-call-apply-bind"><span class="nav-number">4.8.6.</span> <span class="nav-text">8.5 call ,apply, bind</span></a></li>
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#8-6-DOM%E4%BA%8B%E4%BB%B6"><span class="nav-number">4.8.7.</span> <span class="nav-text">8.6 DOM事件</span></a></li>
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#8-7-%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0"><span class="nav-number">4.8.8.</span> <span class="nav-text">8.7 箭头函数</span></a></li>
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#8-8-%E7%BB%91%E5%AE%9A%E6%96%B9%E5%BC%8F%EF%BC%9A"><span class="nav-number">4.8.9.</span> <span class="nav-text">8.8 绑定方式：</span></a></li>
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%9A%90%E5%A3%AB%E7%BB%91%E5%AE%9A%EF%BC%9A"><span class="nav-number">4.8.10.</span> <span class="nav-text">隐士绑定：</span></a></li>
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%98%BE%E7%A4%BA%E7%BB%91%E5%AE%9A"><span class="nav-number">4.8.11.</span> <span class="nav-text">显示绑定</span></a></li>
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#new-%E7%BB%91%E5%AE%9A"><span class="nav-number">4.8.12.</span> <span class="nav-text">new 绑定</span></a></li>
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BC%98%E5%85%88%E7%BA%A7%E9%97%AE%E9%A2%98%EF%BC%9A"><span class="nav-number">4.8.13.</span> <span class="nav-text">优先级问题：</span></a></li>
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%BB%8F%E5%85%B8%E9%9D%A2%E8%AF%95%E9%A2%98%EF%BC%9A"><span class="nav-number">4.8.14.</span> <span class="nav-text">经典面试题：</span></a></li>
                        </ol>
                      </li>
                      <li class="nav-item nav-level-2"><a class="nav-link" href="#9-%E7%BB%A7%E6%89%BF"><span class="nav-number">4.9.</span> <span class="nav-text">9.继承</span></a>
                        <ol class="nav-child">
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#9-1-%E5%8E%9F%E5%9E%8B%E9%93%BE%E7%BB%A7%E6%89%BF%EF%BC%9A"><span class="nav-number">4.9.1.</span> <span class="nav-text">9.1 原型链继承：</span></a></li>
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#9-2-%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%E7%BB%A7%E6%89%BF%EF%BC%9A"><span class="nav-number">4.9.2.</span> <span class="nav-text">9.2 构造函数继承：</span></a></li>
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#9-3-%E7%BB%84%E5%90%88%E7%BB%A7%E6%89%BF%EF%BC%9A"><span class="nav-number">4.9.3.</span> <span class="nav-text">9.3 组合继承：</span></a></li>
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#9-4%E5%8E%9F%E5%9E%8B%E5%BC%8F%E7%BB%A7%E6%89%BF"><span class="nav-number">4.9.4.</span> <span class="nav-text">9.4原型式继承</span></a></li>
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#9-5-%E5%AF%84%E7%94%9F%E5%BC%8F%E7%BB%A7%E6%89%BF"><span class="nav-number">4.9.5.</span> <span class="nav-text">9.5 寄生式继承</span></a></li>
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#9-6-extends%EF%BC%88es6%EF%BC%89"><span class="nav-number">4.9.6.</span> <span class="nav-text">9.6 extends（es6）</span></a></li>
                        </ol>
                      </li>
                      <li class="nav-item nav-level-2"><a class="nav-link" href="#10-%E6%95%B0%E6%8D%AE%E5%AD%98%E5%82%A8%E4%B8%8E%E4%BC%A0%E5%8F%82"><span class="nav-number">4.10.</span> <span class="nav-text">10.数据存储与传参</span></a>
                        <ol class="nav-child">
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BC%A0%E9%80%92%E5%8F%82%E6%95%B0"><span class="nav-number">4.10.1.</span> <span class="nav-text">传递参数</span></a></li>
                        </ol>
                      </li>
                      <li class="nav-item nav-level-2"><a class="nav-link" href="#11-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E4%B8%8E%E6%B5%85%E6%8B%B7%E8%B4%9D%EF%BC%88%E6%89%8B%E5%86%99%E4%B8%80%E4%B8%AA%E6%B7%B1%E6%8B%B7%E8%B4%9D%EF%BC%89"><span class="nav-number">4.11.</span> <span class="nav-text">11.深拷贝与浅拷贝（手写一个深拷贝）</span></a>
                        <ol class="nav-child">
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%B5%85%E6%8B%B7%E8%B4%9D%EF%BC%9A"><span class="nav-number">4.11.1.</span> <span class="nav-text">浅拷贝：</span></a></li>
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%B7%B1%E6%8B%B7%E8%B4%9D%EF%BC%9A"><span class="nav-number">4.11.2.</span> <span class="nav-text">深拷贝：</span></a></li>
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#1-JSON"><span class="nav-number">4.11.3.</span> <span class="nav-text">1.JSON</span></a></li>
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#2-%E9%80%92%E5%BD%92-for-in"><span class="nav-number">4.11.4.</span> <span class="nav-text">2.递归+for in</span></a></li>
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%8E%AF"><span class="nav-number">4.11.5.</span> <span class="nav-text">环</span></a></li>
                        </ol>
                      </li>
                      <li class="nav-item nav-level-2"><a class="nav-link" href="#12-%E9%AB%98%E9%98%B6%E5%87%BD%E6%95%B0%E5%8F%8A%E6%9F%AF%E9%87%8C%E5%8C%96"><span class="nav-number">4.12.</span> <span class="nav-text">12.高阶函数及柯里化</span></a>
                        <ol class="nav-child">
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%8E%A5%E5%8F%97%E5%8F%82%E6%95%B0%E4%B8%BA%E5%87%BD%E6%95%B0"><span class="nav-number">4.12.1.</span> <span class="nav-text">接受参数为函数</span></a></li>
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%BF%94%E5%9B%9E%E5%87%BD%E6%95%B0"><span class="nav-number">4.12.2.</span> <span class="nav-text">返回函数</span></a></li>
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%9F%AF%E9%87%8C%E5%8C%96"><span class="nav-number">4.12.3.</span> <span class="nav-text">柯里化</span></a></li>
                        </ol>
                      </li>
                      <li class="nav-item nav-level-2"><a class="nav-link" href="#13-ajax"><span class="nav-number">4.13.</span> <span class="nav-text">13.ajax</span></a>
                        <ol class="nav-child">
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%8F%96%E6%B6%88%E5%BC%82%E6%AD%A5"><span class="nav-number">4.13.1.</span> <span class="nav-text">取消异步</span></a></li>
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#progress%E8%BF%9B%E5%BA%A6%EF%BC%9A"><span class="nav-number">4.13.2.</span> <span class="nav-text">progress进度：</span></a></li>
                        </ol>
                      </li>
                      <li class="nav-item nav-level-2"><a class="nav-link" href="#14-DOM"><span class="nav-number">4.14.</span> <span class="nav-text">14.DOM</span></a>
                        <ol class="nav-child">
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#dom%E5%85%83%E7%B4%A0%E7%9A%84%E5%A2%9E%E5%88%A0%E6%94%B9%E6%9F%A5"><span class="nav-number">4.14.1.</span> <span class="nav-text">dom元素的增删改查</span></a></li>
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%A2%9E-%E6%B7%BB%E5%8A%A0dom%E5%85%83%E7%B4%A0"><span class="nav-number">4.14.2.</span> <span class="nav-text">增:添加dom元素</span></a></li>
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%88%A0%E9%99%A4dom%E5%85%83%E7%B4%A0"><span class="nav-number">4.14.3.</span> <span class="nav-text">删除dom元素</span></a></li>
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%A7%BB%E5%8A%A8dom"><span class="nav-number">4.14.4.</span> <span class="nav-text">移动dom:</span></a></li>
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%9B%BF%E6%8D%A2dom%E5%85%83%E7%B4%A0"><span class="nav-number">4.14.5.</span> <span class="nav-text">替换dom元素</span></a></li>
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#dom%E6%A3%80%E6%B5%8B%EF%BC%9A"><span class="nav-number">4.14.6.</span> <span class="nav-text">dom检测：</span></a></li>
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#dom%E8%A7%82%E5%AF%9F%E8%80%85%EF%BC%9AMutationObserver"><span class="nav-number">4.14.7.</span> <span class="nav-text">dom观察者：MutationObserver</span></a></li>
                        </ol>
                      </li>
                      <li class="nav-item nav-level-2"><a class="nav-link" href="#15-BOM"><span class="nav-number">4.15.</span> <span class="nav-text">15.BOM</span></a>
                        <ol class="nav-child">
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#Window"><span class="nav-number">4.15.1.</span> <span class="nav-text">Window</span></a></li>
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#screen"><span class="nav-number">4.15.2.</span> <span class="nav-text">screen</span></a></li>
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#location"><span class="nav-number">4.15.3.</span> <span class="nav-text">location</span></a></li>
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#history"><span class="nav-number">4.15.4.</span> <span class="nav-text">history</span></a></li>
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#navigator"><span class="nav-number">4.15.5.</span> <span class="nav-text">navigator</span></a></li>
                        </ol>
                      </li>
                      <li class="nav-item nav-level-2"><a class="nav-link" href="#16-%E5%8C%85%E8%A3%85%E5%AF%B9%E8%B1%A1"><span class="nav-number">4.16.</span> <span class="nav-text">16.包装对象</span></a></li>
                      <li class="nav-item nav-level-2"><a class="nav-link" href="#17-%E5%B0%81%E8%A3%85%EF%BC%8C%E5%A4%9A%E6%80%81"><span class="nav-number">4.17.</span> <span class="nav-text">17.封装，多态</span></a>
                        <ol class="nav-child">
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%A4%9A%E6%80%81%EF%BC%9A"><span class="nav-number">4.17.1.</span> <span class="nav-text">多态：</span></a></li>
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%B0%81%E8%A3%85"><span class="nav-number">4.17.2.</span> <span class="nav-text">封装</span></a></li>
                        </ol>
                      </li>
                      <li class="nav-item nav-level-2"><a class="nav-link" href="#18-%E5%BC%82%E5%B8%B8%E6%8D%95%E8%8E%B7try-catch"><span class="nav-number">4.18.</span> <span class="nav-text">18.异常捕获try catch</span></a></li>
                      <li class="nav-item nav-level-2"><a class="nav-link" href="#19-%E5%8D%95%E7%BA%BF%E7%A8%8B%E5%92%8C%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF"><span class="nav-number">4.19.</span> <span class="nav-text">19.单线程和事件循环</span></a>
                        <ol class="nav-child">
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%8D%95%E7%BA%BF%E7%A8%8B"><span class="nav-number">4.19.1.</span> <span class="nav-text">单线程</span></a></li>
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF"><span class="nav-number">4.19.2.</span> <span class="nav-text">事件循环</span></a></li>
                        </ol>
                      </li>
                      <li class="nav-item nav-level-2"><a class="nav-link" href="#20-promise"><span class="nav-number">4.20.</span> <span class="nav-text">20.promise</span></a></li>
                      <li class="nav-item nav-level-2"><a class="nav-link" href="#21-es6%E6%A8%A1%E5%9D%97%E5%8C%96"><span class="nav-number">4.21.</span> <span class="nav-text">21.es6模块化</span></a></li>
                    </ol>
                  </li>
                  <li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%80%BB%E7%BB%93%EF%BC%9A"><span class="nav-number">5.</span> <span class="nav-text">总结：</span></a></li>
                </ol>
              </div>
            </div>
            <!--/noindex-->

            <div class="site-overview-wrap sidebar-panel">
              <div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
                <p class="site-author-name" itemprop="name">holidaypenguin</p>
                <div class="site-description" itemprop="description"></div>
              </div>
              <div class="site-state-wrap site-overview-item animated">
                <nav class="site-state">
                  <div class="site-state-item site-state-posts">
                    <a href="/archives/">

                      <span class="site-state-item-count">138</span>
                      <span class="site-state-item-name">日志</span>
                    </a>
                  </div>
                  <div class="site-state-item site-state-categories">
                    <a href="/categories/">

                      <span class="site-state-item-count">26</span>
                      <span class="site-state-item-name">分类</span></a>
                  </div>
                  <div class="site-state-item site-state-tags">
                    <a href="/tags/">

                      <span class="site-state-item-count">234</span>
                      <span class="site-state-item-name">标签</span></a>
                  </div>
                </nav>
              </div>
              <div class="links-of-author site-overview-item animated">
                <span class="links-of-author-item">
                  <a href="https://github.com/holidaypenguin" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;holidaypenguin" rel="noopener" target="_blank"><i class="github fa-fw"></i>GitHub</a>
                </span>
                <span class="links-of-author-item">
                  <a href="mailto:songshipeng2016@gmail.com" title="E-Mail → mailto:songshipeng2016@gmail.com" rel="noopener" target="_blank"><i class="envelope fa-fw"></i>E-Mail</a>
                </span>
              </div>



            </div>
          </div>
        </div>
      </aside>
      <div class="sidebar-dimmer"></div>


    </header>


    <div class="back-to-top" role="button">
      <i class="fa fa-arrow-up"></i>
      <span>0%</span>
    </div>

    <noscript>
      <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
    </noscript>


    <div class="main-inner post posts-expand">





      <div class="post-block">



        <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh-CN">
          <link itemprop="mainEntityOfPage" href="https://holidaypenguin.gitee.io/blob/2020-09-29-understanding-26-core-concepts-of-javascript/">

          <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
            <meta itemprop="image" content="/images/avatar.gif">
            <meta itemprop="name" content="holidaypenguin">
            <meta itemprop="description" content="">
          </span>

          <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
            <meta itemprop="name" content="HolidayPenguin">
          </span>
          <header class="post-header">
            <h1 class="post-title" itemprop="name headline">
              深入理解JavaScript26个核心概念
            </h1>

            <div class="post-meta-container">
              <div class="post-meta">
                <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                    <i class="far fa-calendar"></i>
                  </span>
                  <span class="post-meta-item-text">发表于</span>

                  <time title="创建时间：2020-09-29 15:18:21" itemprop="dateCreated datePublished" datetime="2020-09-29T15:18:21+08:00">2020-09-29</time>
                </span>
                <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                    <i class="far fa-folder"></i>
                  </span>
                  <span class="post-meta-item-text">分类于</span>
                  <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                    <a href="/categories/JavaScript/" itemprop="url" rel="index"><span itemprop="name">JavaScript</span></a>
                  </span>
                </span>


                <span id="/blob/2020-09-29-understanding-26-core-concepts-of-javascript/" class="post-meta-item leancloud_visitors" data-flag-title="深入理解JavaScript26个核心概念" title="阅读次数">
                  <span class="post-meta-item-icon">
                    <i class="far fa-eye"></i>
                  </span>
                  <span class="post-meta-item-text">阅读次数：</span>
                  <span class="leancloud-visitors-count"></span>
                </span>
              </div>

              <div class="post-description">
                <!-- more -->
              </div>
            </div>
          </header>




          <div class="post-body" itemprop="articleBody">
            <p><a target="_blank" rel="noopener" href="https://github.com/jwenjian/visitor-count-badge"><img src="" data-original="https://visitor-badge.glitch.me/badge?page_id=holidaypenguin.gitee.io/" alt="总访客数量"></a></p>
            <h1 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h1>
            <p>大家好，我是六六。花费了一周的时间终于写完了这篇js核心概念的汇总。创作的过程也是查缺补漏，希望大家也能有收获的。喜欢的给作者点个赞哦，创作不容易的。</p>
            <h1 id="系列预告"><a href="#系列预告" class="headerlink" title="系列预告"></a>系列预告</h1>
            <p>2.前端进阶必经之路（二）： </p>
            <p>3.前端进阶必经之路（三）：前端必会的Vue的7大手写源码</p>
            <h1 id="备注"><a href="#备注" class="headerlink" title="备注"></a>备注</h1>
            <ul>
              <li>如有错误，请大家积极指出来，避免误导他人。（第一次写这么多字的文章，难免会有错误的）</li>
              <li>如有补充，告诉我，我会积极添加上来。</li>
              <li>我也是个小白，希望和大家一起学习进步。所以喷我的话，我也会喷回去的哦。</li>
              <li>如果不慎引入他人的文章片段，指出来我会添加原处的。</li>
            </ul>
            <h1 id="正文："><a href="#正文：" class="headerlink" title="正文："></a>正文：</h1>
            <h2 id="1-js运行环境"><a href="#1-js运行环境" class="headerlink" title="1.js运行环境"></a>1.js运行环境</h2>
            <p>js作为脚本语言运行在浏览器中，浏览器就是js的运行环境。对于众多风云的浏览器厂商来说， 他们的内核又是不一样的。浏览器内核分为两种：渲染引擎和js引擎。</p>
            <p>渲染引擎：负责网页内容呈现的。</p>
            <p>Js引擎：解释js脚本，实现js交互效果的。</p>
            <h3 id="1-1常见的内核："><a href="#1-1常见的内核：" class="headerlink" title="1.1常见的内核："></a>1.1常见的内核：<img src="" data-original="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1031beb340cb4fb6a12619070ee2ba75~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></h3>
            <h3 id="1-2-现在我们有一个js文件，那么浏览器是如何执行它的呢？"><a href="#1-2-现在我们有一个js文件，那么浏览器是如何执行它的呢？" class="headerlink" title="1.2 现在我们有一个js文件，那么浏览器是如何执行它的呢？"></a>1.2 现在我们有一个js文件，那么浏览器是如何执行它的呢？</h3>
            <p>首先我们js文件以scirpt标签元素呈现在html里面的。浏览器根据html文件以此解析标签，当解 析到scirpt标签时，会停止html解析,阻塞住，开始下载js文件并且执行它，在执行的过程中，如 果是第一个js文件此时浏览器会触发首次渲染（至于为什么，自己做下实验，不懂的可以留言）。 所以出现一个问题js文件大大阻碍了html页面解析及渲染，所以引入async和defer两个属性（对于 首屏优化有很大的提升，也要谨慎使用）</p>
            <p>async:开启另外一个线程下载js文件，下载完成，立马执行。（此时才发生阻塞）</p>
            <p>defer:开启另一个线程下载js文件,直到页面加载完成时才执行。（根本不阻塞）</p>
            <h2 id="2-js数据类型"><a href="#2-js数据类型" class="headerlink" title="2.js数据类型"></a>2.js数据类型</h2>
            <p>基本数据类型：</p>
            <p>string:由多个16位Unicode字符组成的字符序列，有单引号或双引号表示</p>
            <p>number:采用了IEEE754格式来表示整数和浮点数值</p>
            <p>boolean:有两个字面值，true和false.区分大小写的</p>
            <p>null:只有一个值的数据类型，值为null.表示一个空对象指针，但用typeof操作会返回一个对象。一般 我们把将来用于保存对象的变量初始化为null.</p>
            <p>undefined:这个类型只有一个值，在声明变量未进行赋值时，这个变量的值就是undefined.</p>
            <p>Symbol:唯一的值。</p>
            <p>引用数据类型：</p>
            <p>object:就是一组数据和功能的集合，无序的键值对的方式存储。可以通过new操作符和创建对象构造函数 来创建。常见的对象类型有array,date,function等.</p>
            <p>经典面试题：</p>
            <p>0.1+0.2为什么不等于0.3？</p>
            <p>0.1和0.2在转换成二进制后会无限循环，由于标准位数的限制后面多余的位数会被截掉，此时就已经出现 了精度的损失，相加后因浮点数小数位的限制而截断的二进制数字在转换为十进制就会变成 0.30000000000000004。<br>数据类型检测方式：</p>
            <h3 id="1-typeof"><a href="#1-typeof" class="headerlink" title="1.typeof"></a>1.typeof</h3>
            <p>typeof检测null是一个对象</p>
            <p>typeof检测函数返回时一个function</p>
            <p>typeof检测其他对象都返回 object</p>
            <h3 id="2-instanceof（下一节手写）"><a href="#2-instanceof（下一节手写）" class="headerlink" title="2.instanceof（下一节手写）"></a>2.instanceof（下一节手写）</h3>
            <p>只要在当前实例的原型链上，用instanceof检测出来的结果都是true，所以在类的原型继承中，最后检测 出来的结果未必是正确的.而且instanceof后面必须更一个对象。<br>不能检测基本类型</p>
            <h3 id="3-constructor："><a href="#3-constructor：" class="headerlink" title="3. constructor："></a>3. constructor：</h3>
            <p>每个构造函数的原型对象都有一个constructor属性，并且指向构造函数本身，由于我们可以手动修改 这个属性，所以结果也不是很准确。 不能检测null和undefined</p>
            <h3 id="4-Object-prototype-toString-call（最佳方案）"><a href="#4-Object-prototype-toString-call（最佳方案）" class="headerlink" title="4.Object.prototype.toString.call（最佳方案）"></a>4.Object.prototype.toString.call（最佳方案）</h3>
            <p>调用Object原型上的toString()方法，并且通过call改变this指向。返回的是字符串</p>
            <h2 id="3-js类型转换"><a href="#3-js类型转换" class="headerlink" title="3.js类型转换"></a>3.js类型转换</h2>
            <p>javaScript作为一门弱类型语言，本质为一个变量可以被赋予不同的数据类型。代码简洁灵活，但稍有 不慎，会出现很多坑。</p>
            <p>javaScript也作为一门动态类型语言，在运行时，可以随便改变其变量的结构。</p>
            <p>所以js变量可以做任意的类型转换，有两种方式，显示类型转换和隐士类型转换。</p>
            <p>但是能转换的类型只有三种：to Number,to String,to Boolean.</p>
            <p>当基本类型转换成上述类型时会调用：Number() ,String(), Boolean()</p>
            <p>只有’’ 0 null undefined NaN false转换boolean为false,其他都为true</p>
            <p>当引用类型转换时，就稍微有些复杂，我们来举个例子：(所有对象转换boolean都为true)</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">let obj&#x3D;&#123;</span><br><span class="line">    value:&#39;你好啊&#39;,</span><br><span class="line">    num:2,</span><br><span class="line">    toString:function()&#123;</span><br><span class="line">        return this.value</span><br><span class="line">    &#125;,</span><br><span class="line">    valueOf:function()&#123;</span><br><span class="line">        return this.num</span><br><span class="line">    &#125;,   </span><br><span class="line">&#125;</span><br><span class="line">console.log(obj+&#39;明天&#39;)  &#x2F;&#x2F;2明天</span><br><span class="line">console.log(obj+1)    &#x2F;&#x2F; 3</span><br><span class="line">console.log(String(obj))   &#x2F;&#x2F; 你好啊</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>当对象进行类型转换时：</p>
            <p>1.首先调用valueOf，如果执行结果是原始值，返回，如果不是下一步</p>
            <p>2.其次调用toString,如果执行结果是原始值,返回，如果不是，报错。</p>
            <p>特殊情况:</p>
            <p>当使用显示类型转换成String时，执行顺序则是先调用toString,其次调用valueOf</p>
            <p>显示类型转换:</p>
            <p>Number() / parseFloat() / parseInt()/String() / toString()/Boolean()</p>
            <p>隐士类型转换：</p>
            <p>+ - == ！&gt;&lt;= &lt;= &gt;=</p>
            <h3 id="3-1经典面试题：-都能答对真的很厉害了-留个名让我关注膜拜一下"><a href="#3-1经典面试题：-都能答对真的很厉害了-留个名让我关注膜拜一下" class="headerlink" title="3.1经典面试题：(都能答对真的很厉害了,留个名让我关注膜拜一下)"></a>3.1经典面试题：(都能答对真的很厉害了,留个名让我关注膜拜一下)</h3>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">1 + &#39;1&#39; </span><br><span class="line">true + 0</span><br><span class="line">&#123;&#125;+[]</span><br><span class="line">4 + &#123;&#125; </span><br><span class="line">4 + [1] </span><br><span class="line">&#39;a&#39; + + &#39;b&#39;</span><br><span class="line">console.log ( [] &#x3D;&#x3D; 0 )</span><br><span class="line">console.log ( ! [] &#x3D;&#x3D; 0 )</span><br><span class="line">console.log ( [] &#x3D;&#x3D; ! [] )</span><br><span class="line">console.log ( [] &#x3D;&#x3D; [] )</span><br><span class="line">console.log(&#123;&#125; &#x3D;&#x3D; !&#123;&#125;)</span><br><span class="line">console.log(&#123;&#125; &#x3D;&#x3D; &#123;&#125;)</span><br><span class="line">复制代码</span><br><span class="line">一错就知道，一做又全忘哈哈哈哈。</span><br><span class="line">答案：</span><br><span class="line">&#39;11&#39;</span><br><span class="line">1</span><br><span class="line">0</span><br><span class="line">&quot;4[object Object]&quot;</span><br><span class="line">&quot;41&quot;</span><br><span class="line">&quot;aNaN&quot;</span><br><span class="line">true</span><br><span class="line">true</span><br><span class="line">true</span><br><span class="line">false</span><br><span class="line">false</span><br><span class="line">false</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <h2 id="4-js遍历"><a href="#4-js遍历" class="headerlink" title="4.js遍历"></a>4.js遍历</h2>
            <h3 id="4-1对象遍历："><a href="#4-1对象遍历：" class="headerlink" title="4.1对象遍历："></a>4.1对象遍历：</h3>
            <p>1.for in：自身和继承属性，可枚举，不含Symbol</p>
            <p>2.Object.keys(obj):可枚举，不含Symbol,自身</p>
            <p>3.Object.values(obj)：可枚举，不含Symbol,自身</p>
            <p>4.Object.getOwnPropertyNames(obj)：自身所有属性，不含Symbol</p>
            <p>5.Reflect.ownKeys(obj):自身所有属性</p>
            <h3 id="4-2-数组遍历："><a href="#4-2-数组遍历：" class="headerlink" title="4.2 数组遍历："></a>4.2 数组遍历：</h3>
            <p>forEach,map,filter,every,some，reduce等.</p>
            <h3 id="4-3-字符串遍历："><a href="#4-3-字符串遍历：" class="headerlink" title="4.3 字符串遍历："></a>4.3 字符串遍历：</h3>
            <p>for in</p>
            <h3 id="4-4-Set数据结构"><a href="#4-4-Set数据结构" class="headerlink" title="4.4 Set数据结构:"></a>4.4 Set数据结构:</h3>
            <p>Set.prototype.keys():返回键名的遍历器</p>
            <p>Set.prototype.values()：返回键值的遍历器</p>
            <p>Set.prototype.entries()：返回键值对的遍历器</p>
            <p>Set.prototype.forEach()：回调函数遍历每个成员</p>
            <h3 id="4-5-Map数据结构："><a href="#4-5-Map数据结构：" class="headerlink" title="4.5 Map数据结构："></a>4.5 Map数据结构：</h3>
            <p>Map.prototype.keys():返回键名的遍历器</p>
            <p>Map.prototype.values()：返回键值的遍历器</p>
            <p>Map.prototype.entries()：返回键值对的遍历器</p>
            <p>Map.prototype.forEach()：回调函数遍历每个成员</p>
            <h2 id="5-作用域与作用域链"><a href="#5-作用域与作用域链" class="headerlink" title="5.作用域与作用域链"></a>5.作用域与作用域链</h2>
            <h3 id="5-1作用域"><a href="#5-1作用域" class="headerlink" title="5.1作用域"></a>5.1作用域</h3>
            <p>javascript采用的静态作用域，也可以称为词法作用域，意思是说作用域是在定义的时候就创建了， 而不是运行的时候。此话对于初学者很不好理解，看看下面这个例子：</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">let a&#x3D;1</span><br><span class="line">function aa()&#123;</span><br><span class="line">    console.log(a)    &#x2F;&#x2F;输出1</span><br><span class="line">&#125;</span><br><span class="line">function bb()&#123;</span><br><span class="line">    let a&#x3D;2</span><br><span class="line">    aa()</span><br><span class="line">&#125;</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>是不是非常违背常理啊，你看嘛，aa在bb里面调用的，aa函数里面没有a变量，那么就应该去调用它的作 用域里找，刚好找到a等于2。思路是完美的，可是js的作者采用的静态作用域，不管你们怎么运行，你们 定义的时候作用域已经生成了。</p>
            <p>那么什么是作用域？</p>
            <p>变量和函数能被有效访问的区域或者集合。作用域决定了代码块之间的资源可访问性。</p>
            <p>作用域也就是一个独立的空间，用于保护变量防止泄露，也起到隔离作用。每个作用域里的变量可以相同命名，互不干涉。就像一栋房子一样，每家每户都是独立的，就是作用域。</p>
            <p>作用域又分为全局作用域和函数作用域，块级作用域。 全局作用域任何地方都可以访问到，如window,Math等全局对象。 函数作用域就是函数内部的变量和方法，函数外部是无法访问到的。 块级作用域指变量声明的代码段外是不可访问的，如let,const.</p>
            <h3 id="5-2作用域链"><a href="#5-2作用域链" class="headerlink" title="5.2作用域链"></a>5.2作用域链</h3>
            <p>知道作用域后，我们来说说什么是作用域链？</p>
            <p>表示一个作用域可以访问到变量的一个集合。函数作为一个对象有一个[[scope]]属性，就是表示这个集合的。再来理解几个概念词：</p>
            <p>AO:活动变量(Active object，VO)</p>
            <p>VO:变量对象(Variable object，VO)</p>
            <p>执行上下文：代码运行的环境，分为全局上下文和函数上下文。</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">举例子来说明一下：（借用的例子）</span><br><span class="line">&#x2F;&#x2F; 作者：jianyangdu洋仔</span><br><span class="line">function a() &#123;</span><br><span class="line">        function b() &#123;</span><br><span class="line">            var b &#x3D; 234;</span><br><span class="line">        &#125;</span><br><span class="line">        var a &#x3D; 123;</span><br><span class="line">        b();</span><br><span class="line">    &#125;</span><br><span class="line">    var gloab &#x3D; 100;</span><br><span class="line">    a();</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>第一步： a 函数定义</p>
            <p><img src="" data-original="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ecffe0562ed64189a5ab84d0af33f8d5~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p>
            <p>我们可以从上图中看到，a 函数在被定义时，a函数对象的属性[[scope]]作用域指向他的作用域链scope chain，此时它的作用域链的第一项指向了GO(Global Object)全局对象，我们看到全局对象上此时有5个属性，分别是this、window、document、a、glob。</p>
            <p>第二步： a 函数执行</p>
            <p><img src="" data-original="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3e717aaf59e648ce94a36e3d87242b14~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p>
            <p>当a函数被执行时，此时a函数对象的作用域[[scope]]的作用域链scope chain的第一项指向了AO(Activation Object)活动对象，AO对象里有4个属性，分别是this、arguments、a、b。第二项指向了GO(Global Object)，GO对象里依然有5个属性，分别是this、window、document、a、golb。</p>
            <p>第三步： b 函数定义</p>
            <p><img src="" data-original="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f1b4653558614231986339f66d85c921~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p>
            <p>! 当b函数被定义时，此时b函数对象的作用域[[scope]]的作用域链scope chain的第一项指向了AO(Activation Object)活动对象，AO对象里有4个属性，分别是this、arguments、a、b。第二项指向了GO(Global Object)，GO对象里依然有5个属性，分别是this、window、document、a、golb。</p>
            <p>第四步： b 函数执行</p>
            <p><img src="" data-original="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fd5fc571b47e42e6bdcce3e116f22ae0~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p>
            <p>当b函数被执行时，此时b函数对象的作用域[[scope]]的作用域链scope chain的第一项指向了AO(Activation Object)活动对象，AO对象里有3个属性，分别是this、arguments、b。第一项指向了AO(Activation Object)活动对象，AO对象里有4个属性，分别是this、arguments、a、b。第二项指向了GO(Global Object)，GO对象里依然有5个属性，分别是this、window、document、a、golb。 以上就是上面代码执行完之后的结果。</p>
            <h2 id="6-闭包"><a href="#6-闭包" class="headerlink" title="6.闭包"></a>6.闭包</h2>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">引自：https:&#x2F;&#x2F;github.com&#x2F;mqyqingfeng&#x2F;Blog&#x2F;issues&#x2F;9</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>不会闭包的程序员不是好程序员。</p>
            <p>闭包的官方定义：</p>
            <p>mdn:闭包是指那些能够访问自由变量的函数。</p>
            <p>维基百科:在函数中可以（嵌套）定义另一个函数时，如果内部的函数引用了外部的函数的变量，则可能产生闭包。闭包可以用来在一个函数与一组“私有”变量之间创建关联关系。在给定函数被多次调用的过程中，这些私有变量能够保持其持久性.</p>
            <p>我：一个作用域可以访问另一个作用域的变量，就产生闭包。之前比喻作用域就好比一栋房子每一户，闭包相当于串门。</p>
            <p>什么是自由变量？</p>
            <p>自由变量是指在函数中使用的，但既不是函数参数也不是函数的局部变量的变量。</p>
            <p>闭包=函数+函数能够访问的自由变量。</p>
            <p>从技术的角度讲，所有的JavaScript函数都是闭包。</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">var a &#x3D; 1;</span><br><span class="line"></span><br><span class="line">function foo() &#123;</span><br><span class="line">    console.log(a);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">foo()</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>foo 函数可以访问变量 a，但是 a 既不是 foo 函数的局部变量，也不是 foo 函数的参数，所以 a 就是自由变量。</p>
            <p>那么，函数 foo + foo 函数访问的自由变量 a 不就是构成了一个闭包嘛……</p>
            <p>我们在看看ECMAScript中，闭包指的是：</p>
            <p>1.从理论角度：所有的函数。因为它们都在创建的时候就将上层上下文的数据保存起来了。哪怕是简单的全局变量也是如此，因为函数中访问全局变量就相当于是在访问自由变量，这个时候使用最外层的作用域。</p>
            <p>2.从实践角度：以下函数才算是闭包：</p>
            <ul>
              <li>即使创建它的上下文已经销毁，它仍然存在（比如，内部函数从父函数中返回）</li>
              <li>在代码中引用了自由变量</li>
            </ul>
            <p>下面我们开始实践论证：（例子依然是来自《JavaScript权威指南》）</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">var scope &#x3D; &quot;global scope&quot;;</span><br><span class="line">function checkscope()&#123;</span><br><span class="line">    var scope &#x3D; &quot;local scope&quot;;</span><br><span class="line">    function f()&#123;</span><br><span class="line">        return scope;</span><br><span class="line">    &#125;</span><br><span class="line">    return f;</span><br><span class="line">&#125;</span><br><span class="line">var foo &#x3D; checkscope();</span><br><span class="line">foo();</span><br><span class="line">输出 &quot;local scope&quot;</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>因为变量查找的规则是通过作用域链的，作用域链是在函数定义的时候就已经确定了， 所以我们来看看定义f函数时候的[[scope]]属性：</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">[</span><br><span class="line">    AO:&#123;</span><br><span class="line">        scope:&quot;local scope&quot;,</span><br><span class="line">        f:function</span><br><span class="line">    &#125;,</span><br><span class="line">    global:&#123;</span><br><span class="line">     scope :&quot;local scope&quot;,</span><br><span class="line">     checkscope:function</span><br><span class="line">    &#125;</span><br><span class="line">]</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>f执行时候的[[scope]]属性：</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">[</span><br><span class="line">    AO:&#123;</span><br><span class="line">        arguments:[],</span><br><span class="line">        this:window</span><br><span class="line">    &#125;,</span><br><span class="line">    AO:&#123;</span><br><span class="line">        scope:&quot;local scope&quot;,</span><br><span class="line">        f:function</span><br><span class="line">    &#125;,</span><br><span class="line">    global:&#123;</span><br><span class="line">     scope :&quot;local scope&quot;,</span><br><span class="line">     checkscope:function</span><br><span class="line">    &#125;</span><br><span class="line">]</span><br><span class="line">根据先后顺序scope变量输出为&quot;local scope&quot;</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>经典面试题：</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">var data &#x3D; [];</span><br><span class="line"></span><br><span class="line">for (var i &#x3D; 0; i &lt; 3; i++) &#123;</span><br><span class="line">  data[i] &#x3D; function () &#123;</span><br><span class="line">    console.log(i);</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;</span><br><span class="line">data[0]();</span><br><span class="line">data[1]();</span><br><span class="line">data[2]();</span><br><span class="line">答案是都是 3，让我们分析一下原因：</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>当执行到 data[0] 函数之前，此时全局上下文的 VO 为：</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">globalContext &#x3D; &#123;</span><br><span class="line">    VO: &#123;</span><br><span class="line">        data: [...],</span><br><span class="line">        i: 3</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>当执行 data[0] 函数的时候，data[0] 函数的作用域链为：</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">data[0]Context &#x3D; &#123;</span><br><span class="line">    Scope: [AO, globalContext.VO]</span><br><span class="line">&#125;</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>data[0]Context 的 AO 并没有 i 值，所以会从 globalContext.VO 中查找，i 为 3，所以打印的结果就是 3</p>
            <h2 id="7-原型及原型对象"><a href="#7-原型及原型对象" class="headerlink" title="7.原型及原型对象"></a>7.原型及原型对象</h2>
            <p>不多说，要会背下面这张图，理解起来很简单的。</p>
            <p>先谈一下我的理解吧：</p>
            <p>javascript万物皆对象，每个对象都有一个__proto__属性，指向了创造它的构造函数的原型对象。</p>
            <p>每个函数都有一个原型对象，prototype,当使用new 创造对象时继承这个对象。</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">function A()&#123;&#125;</span><br><span class="line">var a&#x3D;new A()</span><br><span class="line">a.__proto__&#x3D;&#x3D;&#x3D;A.prototype</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>下面就有问题了，谁创造了A这个构造函数呢,还有谁创造了A.prototype这个对象呢？</p>
            <p>这时候我们就要知道js两个顶级函数，Function,Object</p>
            <p>所有函数都是由Function创建的</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">A.__proto__&#x3D;&#x3D;&#x3D;Function.prototype</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>刚说了所有函数都是由Function创建的，也包括自己。也就是说Function创造了自己：</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">Function.__proto__&#x3D;&#x3D;&#x3D;Function.prototype</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>Object刚讲的是顶级函数，所以也是函数：（所有的鱼都归猫管哈哈哈哈哈）</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">Object.__proto__&#x3D;&#x3D;&#x3D;Function.prototype</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>所有的对象都是由Object构造函数创建的：</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">A.prototype.__proto__&#x3D;&#x3D;&#x3D;Object.prototype</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>那么Object.prototype也是对象啊，是由谁创建的呢，记住万物皆空,何尝不是人生，到头来什么都会没有。</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">Object.prototype.__proto__&#x3D;&#x3D;&#x3D;null</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <h3 id="原型链-一种访问机制-："><a href="#原型链-一种访问机制-：" class="headerlink" title="原型链(一种访问机制)："></a>原型链(一种访问机制)：</h3>
            <p>1.在访问对象的某个成员的时候会先在对象中找是否存在</p>
            <p>2.如果当前对象中没有就在构造函数的原型对象中找</p>
            <p>3.如果原型对象中没有找到就到原型对象的原型上找</p>
            <p>4.直到Object的原型对象的原型是null为止</p>
            <p><img src="" data-original="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/369763c6cb6d47bcae20146cca445470~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p>
            <h2 id="8-this指向问题"><a href="#8-this指向问题" class="headerlink" title="8.this指向问题"></a>8.this指向问题</h2>
            <p>这个问题直接从结果入手，this指向一共有七种情况，下面一 一说起。</p>
            <h3 id="8-1-全局环境-普通函数调用-普通对象"><a href="#8-1-全局环境-普通函数调用-普通对象" class="headerlink" title="8.1 全局环境 普通函数调用,普通对象"></a>8.1 全局环境 普通函数调用,普通对象</h3>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">const obj&#x3D;&#123;a:this&#125;</span><br><span class="line">obj.this&#x3D;&#x3D;&#x3D;window  &#x2F;&#x2F;true</span><br><span class="line">function fn()&#123;</span><br><span class="line">    console.log(this)   &#x2F;&#x2F;window</span><br><span class="line">&#125;</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <h3 id="8-2-构造函数"><a href="#8-2-构造函数" class="headerlink" title="8.2 构造函数"></a>8.2 构造函数</h3>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">  function a() &#123;</span><br><span class="line">    console.log(this)</span><br><span class="line">  &#125;</span><br><span class="line">  const obj &#x3D; new a()   &#x2F;&#x2F;  a&#123;&#125;</span><br><span class="line">  a()                    &#x2F;&#x2F; &#39;window&#39;</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>new出来的对象，this指向了即将new出来的对象。<br>当做普通函数执行，this指向window。</p>
            <h3 id="8-3-对象方法"><a href="#8-3-对象方法" class="headerlink" title="8.3 对象方法"></a>8.3 对象方法</h3>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">  const obj &#x3D; &#123;</span><br><span class="line">    x: 0,</span><br><span class="line">    foo: function () &#123;</span><br><span class="line">      console.log(this)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  obj.foo()                 &#x2F;&#x2F; obj</span><br><span class="line">  const a &#x3D; obj.foo</span><br><span class="line">  a()                       &#x2F;&#x2F;window</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>作为对象方法，this指向了这个对象。(新对象绑定到函数调用的this)<br>一旦有变量直接指向了这个方法，this为window.</p>
            <h3 id="特殊情况"><a href="#特殊情况" class="headerlink" title="特殊情况"></a>特殊情况</h3>
            <p>如果在方法里面执行函数，this指向window.</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">  const obj &#x3D; &#123;</span><br><span class="line">    x: 0,</span><br><span class="line">    foo: function () &#123;</span><br><span class="line">      console.log(this)      &#x2F;&#x2F; obj</span><br><span class="line">      function foo1() &#123;</span><br><span class="line">        console.log(this)    &#x2F;&#x2F;window</span><br><span class="line">      &#125;</span><br><span class="line">      foo1()</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  obj.foo()   </span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <h3 id="8-4-构造函数prototype属性"><a href="#8-4-构造函数prototype属性" class="headerlink" title="8.4 构造函数prototype属性"></a>8.4 构造函数prototype属性</h3>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">  function Fn() &#123;</span><br><span class="line">    this.a &#x3D; 10</span><br><span class="line">    let a &#x3D; 100</span><br><span class="line">  &#125;</span><br><span class="line">  Fn.prototype.fn &#x3D; function () &#123;</span><br><span class="line">    console.log(this.a)             &#x2F;&#x2F; 10 说明指向了obj这个对象</span><br><span class="line">  &#125;</span><br><span class="line">  const obj &#x3D; new Fn()</span><br><span class="line">  obj.fn()</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>原型定义方法的this指向了实例对象。毕竟是通过对象调用的。</p>
            <h3 id="8-5-call-apply-bind"><a href="#8-5-call-apply-bind" class="headerlink" title="8.5 call ,apply, bind"></a>8.5 call ,apply, bind</h3>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">  const obj &#x3D; &#123;</span><br><span class="line">    x: 10</span><br><span class="line">  &#125;</span><br><span class="line">  function fn() &#123;</span><br><span class="line">    console.log(this)</span><br><span class="line">  &#125;</span><br><span class="line">  fn.call(obj)      &#x2F;&#x2F;obj</span><br><span class="line">  fn.apply(obj) &#x2F;&#x2F;obj</span><br><span class="line">  fn.bind(obj)() &#x2F;&#x2F;obj</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>this指向传入的对象。</p>
            <h3 id="8-6-DOM事件"><a href="#8-6-DOM事件" class="headerlink" title="8.6 DOM事件"></a>8.6 DOM事件</h3>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line"> document.getElementById(&#39;app&#39;).addEventListener(&#39;click&#39;, function () &#123;</span><br><span class="line">    console.log(this)           &#x2F;&#x2F; id为app的这个对象</span><br><span class="line">  &#125;)</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>指向绑定事件的对象。</p>
            <h3 id="8-7-箭头函数"><a href="#8-7-箭头函数" class="headerlink" title="8.7 箭头函数"></a>8.7 箭头函数</h3>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">  obj &#x3D; &#123;</span><br><span class="line">    a: 10,</span><br><span class="line">    c: function () &#123;</span><br><span class="line">      b &#x3D; () &#x3D;&gt; &#123;</span><br><span class="line">        console.log(this)           &#x2F;&#x2F;指向obj</span><br><span class="line">      &#125;</span><br><span class="line">      b()</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  obj.c()</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>在方法中定义函数应该是指向window,但是箭头函数没有自己的this，所以指向上一层作用域中的this.</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line"> document.getElementById(&#39;app&#39;).addEventListener(&#39;click&#39;, () &#x3D;&gt; &#123;</span><br><span class="line">    console.log(this)           &#x2F;&#x2F; 改为箭头函数，指向了window,而不是触发对象</span><br><span class="line">  &#125;)</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <h3 id="8-8-绑定方式："><a href="#8-8-绑定方式：" class="headerlink" title="8.8 绑定方式："></a>8.8 绑定方式：</h3>
            <h3 id="隐士绑定："><a href="#隐士绑定：" class="headerlink" title="隐士绑定："></a>隐士绑定：</h3>
            <p>谁调用方法，this指向谁。</p>
            <h3 id="显示绑定"><a href="#显示绑定" class="headerlink" title="显示绑定"></a>显示绑定</h3>
            <p>call,bind,apply</p>
            <h3 id="new-绑定"><a href="#new-绑定" class="headerlink" title="new 绑定"></a>new 绑定</h3>
            <h3 id="优先级问题："><a href="#优先级问题：" class="headerlink" title="优先级问题："></a>优先级问题：</h3>
            <p>new&gt;显示绑定&gt;隐式绑定</p>
            <h3 id="经典面试题："><a href="#经典面试题：" class="headerlink" title="经典面试题："></a>经典面试题：</h3>
            <p>上面知道了没啥难的。</p>
            <h2 id="9-继承"><a href="#9-继承" class="headerlink" title="9.继承"></a>9.继承</h2>
            <ul>
              <li>原型链继承</li>
              <li>构造函数继承</li>
              <li>组合继承</li>
              <li>寄生组合继承</li>
              <li>extends继承</li>
            </ul>
            <h3 id="9-1-原型链继承："><a href="#9-1-原型链继承：" class="headerlink" title="9.1 原型链继承："></a>9.1 原型链继承：</h3>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line"> function Animal() &#123;</span><br><span class="line">    this.name &#x3D; &#39;cat&#39;</span><br><span class="line">    this.msg &#x3D; &#123;</span><br><span class="line">      age: 9</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  Animal.prototype.greet &#x3D; function () &#123;</span><br><span class="line">    console.log(&#39;hehe&#39;)</span><br><span class="line">  &#125;</span><br><span class="line">  function Dog() &#123;</span><br><span class="line">    this.name &#x3D; &#39;dog&#39;</span><br><span class="line">  &#125;</span><br><span class="line">  Dog.prototype &#x3D; new Animal()  &#x2F;&#x2F;核心一步</span><br><span class="line"></span><br><span class="line">  const a &#x3D; new Dog()</span><br><span class="line">  a.msg.age &#x3D; &#39;99&#39;</span><br><span class="line">  const b &#x3D; new Animal()</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>缺点：多个实例对引用类型操作会被篡改</p>
            <h3 id="9-2-构造函数继承："><a href="#9-2-构造函数继承：" class="headerlink" title="9.2 构造函数继承："></a>9.2 构造函数继承：</h3>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">function Animal() &#123;</span><br><span class="line">    this.name &#x3D; &#39;cat&#39;</span><br><span class="line">    this.msg &#x3D; &#123;</span><br><span class="line">      age: 9</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  Animal.prototype.greet &#x3D; function () &#123;</span><br><span class="line">    console.log(&#39;hehe&#39;)</span><br><span class="line">  &#125;</span><br><span class="line">  function Dog() &#123;</span><br><span class="line">   Animal.call(this)            &#x2F;&#x2F; 核心一步</span><br><span class="line">  &#125;</span><br><span class="line">const a&#x3D;new Dog()</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>缺点：</p>
            <ul>
              <li>只能继承父类的实例属性和方法，不能继承原型属性/方法。</li>
              <li>性能不好，每个子类都会拥有父类实例的副本。</li>
            </ul>
            <h3 id="9-3-组合继承："><a href="#9-3-组合继承：" class="headerlink" title="9.3 组合继承："></a>9.3 组合继承：</h3>
            <p>就是将上两种方法结合起来</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">function Animal() &#123;</span><br><span class="line">    this.name &#x3D; &#39;cat&#39;</span><br><span class="line">    this.msg &#x3D; &#123;</span><br><span class="line">      age: 9</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  Animal.prototype.greet &#x3D; function () &#123;</span><br><span class="line">    console.log(&#39;hehe&#39;)</span><br><span class="line">  &#125;</span><br><span class="line">  function Dog() &#123;</span><br><span class="line">   Animal.call(this)            &#x2F;&#x2F; 核心一步</span><br><span class="line">  &#125;</span><br><span class="line">  Dog.prototype &#x3D; new Animal()  &#x2F;&#x2F; 核心一步</span><br><span class="line">const a&#x3D;new Dog()</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <h3 id="9-4原型式继承"><a href="#9-4原型式继承" class="headerlink" title="9.4原型式继承"></a>9.4原型式继承</h3>
            <p>利用一个空对象作为中介，将某个对象直接赋值给空对象构造函数的原型。</p>
            <ul>
              <li>不能做到函数复用</li>
              <li>共享引用类型属性的值</li>
              <li>无法传递参数 缺点：</li>
            </ul>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">function inheritObject(obj)&#123;</span><br><span class="line">    function F()&#123;&#125;;</span><br><span class="line">    F.prototype &#x3D; obj;</span><br><span class="line">    return new F();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">var situation &#x3D; &#123;</span><br><span class="line">    companies:[&#39;bigo&#39;,&#39;yy&#39;,&#39;uc&#39;];</span><br><span class="line">    area:&#39;guangzhou&#39;;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">var situationA &#x3D; inheritObject(situation);</span><br><span class="line">console.log(situationA.area)     &#x2F;&#x2F;&#39;guangzhou&#39;</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <h3 id="9-5-寄生式继承"><a href="#9-5-寄生式继承" class="headerlink" title="9.5 寄生式继承"></a>9.5 寄生式继承</h3>
            <p>在原型式继承的基础上，增强对象，返回构造函数.</p>
            <p>缺点同上</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line"> function createAnother(original)&#123;</span><br><span class="line">  var clone &#x3D; object(original); &#x2F;&#x2F; 或 Object.create(original) </span><br><span class="line">  clone.sayHi &#x3D; function()&#123;  &#x2F;&#x2F; 以某种方式来增强对象</span><br><span class="line">    alert(&quot;hi&quot;);</span><br><span class="line">  &#125;;</span><br><span class="line">  return clone; &#x2F;&#x2F; 返回这个对象</span><br><span class="line">&#125;</span><br><span class="line">var person &#x3D; &#123;</span><br><span class="line">  name: &#39;Nicholas&#39;,</span><br><span class="line">  friends : [&quot;Shelby&quot;,&quot;Coury&quot;,&quot;Van&quot;]</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">var anotherPerson  &#x3D; createAnother(person) </span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <h3 id="9-6-extends（es6）"><a href="#9-6-extends（es6）" class="headerlink" title="9.6 extends（es6）"></a>9.6 extends（es6）</h3>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">借用阮一峰老师的es6中extends继承，眼过千遍，不如手写一遍。</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>上面的只能说去应付面试，这个才是我们开发中最常用的，所以必须掌握。</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">写法：</span><br><span class="line">class Point &#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">class ColorPoint extends Point &#123;</span><br><span class="line">&#125;</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>上面代码定义了一个ColorPoint类，该类通过extends关键字，继承了Point类的所有属性和方法</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">Object.getPrototypeOf可以使用这个方法判断，一个类是否继承了另一个类</span><br><span class="line">Object.getPrototypeOf(ColorPoint) &#x3D;&#x3D;&#x3D; Point    &#x2F;&#x2F;true</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p><strong>Super关键字</strong>：</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">class A &#123;&#125;</span><br><span class="line"></span><br><span class="line">class B extends A &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    super();</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>上面代码中，子类B的构造函数之中的super()，代表调用父类的构造函数。这是必须的，否则 JavaScript 引擎会报错。</p>
            <p>注意，super虽然代表了父类A的构造函数，但是返回的是子类B的实例，即super内部的this指的是B的实例，因此super()在这里相当于A.prototype.constructor.call(this)。</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">class A &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    console.log(new.target.name);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">class B extends A &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    super();</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">new A() &#x2F;&#x2F; A</span><br><span class="line">new B() &#x2F;&#x2F; B</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>上面代码中，new.target指向当前正在执行的函数。可以看到，在super()执行时，它指向的是子类B的构造函数，而不是父类A的构造函数。也就是说，super()内部的this指向的是B。</p>
            <p>作为函数时，super()只能用在子类的构造函数之中，用在其他地方就会报错。</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">class A &#123;&#125;</span><br><span class="line"></span><br><span class="line">class B extends A &#123;</span><br><span class="line">  m() &#123;</span><br><span class="line">    super(); &#x2F;&#x2F; 报错</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>上面代码中，super()用在B类的m方法之中，就会造成语法错误。</p>
            <p>第二种情况，super作为对象时，在普通方法中，指向父类的原型对象；在静态方法中，指向父类。</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">class A &#123;</span><br><span class="line">  p() &#123;</span><br><span class="line">    return 2;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">class B extends A &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    super();</span><br><span class="line">    console.log(super.p()); &#x2F;&#x2F; 2</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">let b &#x3D; new B();</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>上面代码中，子类B当中的super.p()，就是将super当作一个对象使用。这时，super在普通方法之中，指向A.prototype，所以super.p()就相当于A.prototype.p()。</p>
            <p>这里需要注意，由于super指向父类的原型对象，所以定义在父类实例上的方法或属性，是无法通过super调用的。</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">class A &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    this.p &#x3D; 2;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">class B extends A &#123;</span><br><span class="line">  get m() &#123;</span><br><span class="line">    return super.p;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">let b &#x3D; new B();</span><br><span class="line">b.m &#x2F;&#x2F; undefined</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>上面代码中，p是父类A实例的属性，super.p就引用不到它。</p>
            <p>如果属性定义在父类的原型对象上，super就可以取到。</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">class A &#123;&#125;</span><br><span class="line">A.prototype.x &#x3D; 2;</span><br><span class="line"></span><br><span class="line">class B extends A &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    super();</span><br><span class="line">    console.log(super.x) &#x2F;&#x2F; 2</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">let b &#x3D; new B();</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>上面代码中，属性x是定义在A.prototype上面的，所以super.x可以取到它的值。</p>
            <p>ES6 规定，在子类普通方法中通过super调用父类的方法时，方法内部的this指向当前的子类实例。</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">class A &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    this.x &#x3D; 1;</span><br><span class="line">  &#125;</span><br><span class="line">  print() &#123;</span><br><span class="line">    console.log(this.x);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">class B extends A &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    super();</span><br><span class="line">    this.x &#x3D; 2;</span><br><span class="line">  &#125;</span><br><span class="line">  m() &#123;</span><br><span class="line">    super.print();</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">let b &#x3D; new B();</span><br><span class="line">b.m() &#x2F;&#x2F; 2</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>上面代码中，super.print()虽然调用的是A.prototype.print()，但是A.prototype.print()内部的this指向子类B的实例，导致输出的是2，而不是1。也就是说，实际上执行的是super.print.call(this)。</p>
            <p>由于this指向子类实例，所以如果通过super对某个属性赋值，这时super就是this，赋值的属性会变成子类实例的属性。</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">class A &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    this.x &#x3D; 1;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">class B extends A &#123;</span><br><span class="line">  constructor() &#123;</span><br><span class="line">    super();</span><br><span class="line">    this.x &#x3D; 2;</span><br><span class="line">    super.x &#x3D; 3;</span><br><span class="line">    console.log(super.x); &#x2F;&#x2F; undefined</span><br><span class="line">    console.log(this.x); &#x2F;&#x2F; 3</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">let b &#x3D; new B();</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>上面代码中，super.x赋值为3，这时等同于对this.x赋值为3。而当读取super.x的时候，读的是A.prototype.x，所以返回undefined。</p>
            <p>如果super作为对象，用在静态方法之中，这时super将指向父类，而不是父类的原型对象。</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">class Parent &#123;</span><br><span class="line">  static myMethod(msg) &#123;</span><br><span class="line">    console.log(&#39;static&#39;, msg);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  myMethod(msg) &#123;</span><br><span class="line">    console.log(&#39;instance&#39;, msg);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">class Child extends Parent &#123;</span><br><span class="line">  static myMethod(msg) &#123;</span><br><span class="line">    super.myMethod(msg);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  myMethod(msg) &#123;</span><br><span class="line">    super.myMethod(msg);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">Child.myMethod(1); &#x2F;&#x2F; static 1</span><br><span class="line"></span><br><span class="line">var child &#x3D; new Child();</span><br><span class="line">child.myMethod(2); &#x2F;&#x2F; instance 2</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>上面代码中，super在静态方法之中指向父类，在普通方法之中指向父类的原型对象。</p>
            <p>另外，在子类的静态方法中通过super调用父类的方法时，方法内部的this指向当前的子类，而不是子类的实例。</p>
            <h2 id="10-数据存储与传参"><a href="#10-数据存储与传参" class="headerlink" title="10.数据存储与传参"></a>10.数据存储与传参</h2>
            <p>在JavaScript中，每一个变量在内存中都需要一个空间来存储。内存空间又分为栈内存和堆内存。 基本数据类型保存在栈中，引用类型保存于堆中。</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">let a&#x3D;&#39;a&#39;</span><br><span class="line">a&#x3D;&#39;b&#39;</span><br><span class="line">let b&#x3D;a</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <ul>
              <li>首先创建变量a，在创建字符串’a’,使变量a指向’a’,a保存的是这个值</li>
              <li>接着又创建字符串’b’,使变量a指向字符串’b’,同时删除’a’</li>
              <li>深拷贝了一份a(重新创建了’b’),使变量b指向了’b’,变量a和变量b互不受影响。</li>
            </ul>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">let obj1&#x3D;new Object()</span><br><span class="line">let obj2&#x3D;obj1</span><br><span class="line">obj1.name&#x3D;&#39;node&#39;</span><br><span class="line">alert(obj2.name)           &#x2F;&#x2F;node</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <ul>
              <li>创建一个对象，开辟了一个堆内存，使变量obj1指向这个对象（堆内存）的地址</li>
              <li>创建一个变量obj2,将obj1的值赋值给obj2,就是将地址赋值给了obj2，这时obj1和obj2指向的是同一个堆内存</li>
              <li>两个变量就相互影响。</li>
            </ul>
            <h3 id="传递参数"><a href="#传递参数" class="headerlink" title="传递参数"></a>传递参数</h3>
            <p>所有函数的参数都是<strong>按值传递的</strong>。也就是说，函数外部的值。复制给函数内部的参数.</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">function add(num)&#123;</span><br><span class="line">    num+&#x3D;10</span><br><span class="line">    return</span><br><span class="line">&#125;</span><br><span class="line">var counrt&#x3D;20</span><br><span class="line">var result&#x3D;add(counrt)</span><br><span class="line">alert(counrt)        &#x2F;&#x2F;20,没有变化</span><br><span class="line">alert(result)       &#x2F;&#x2F;30</span><br><span class="line">复制代码</span><br><span class="line">function setName(obj)&#123;</span><br><span class="line">  obj.name&#x3D;&#39;node&#39;</span><br><span class="line">&#125;</span><br><span class="line">var person&#x3D;new Object()</span><br><span class="line">setName(person)</span><br><span class="line"></span><br><span class="line">alert(person.name)       &#x2F;&#x2F;&#39;node&#39;</span><br><span class="line">复制代码</span><br><span class="line">function setName(obj)&#123;</span><br><span class="line">  obj.name&#x3D;&#39;node&#39;</span><br><span class="line">  obj&#x3D;&#123;name:&#39;java&#39;&#125;</span><br><span class="line">&#125;</span><br><span class="line">var person&#x3D;new Object()</span><br><span class="line">setName(person)</span><br><span class="line"></span><br><span class="line">alert(person.name)  &#x2F;&#x2F;&#39;node&#39;</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>分析：之前说过，函数参数是按值传递的。所以在函数内部，obj这个局部变量保存的是person这个对象的地址。第一步操作了这个地址下的name属性为’node’,第二步，就是将这个变量指向了一个新的堆地址，所以外部person对象丝毫不受影响，name属性依旧为node.</p>
            <h2 id="11-深拷贝与浅拷贝（手写一个深拷贝）"><a href="#11-深拷贝与浅拷贝（手写一个深拷贝）" class="headerlink" title="11.深拷贝与浅拷贝（手写一个深拷贝）"></a>11.深拷贝与浅拷贝（手写一个深拷贝）</h2>
            <p>由于数据存储方式不同，对于引用数据而言，有了浅拷贝和深拷贝。浅拷贝是指拷贝地址，公用同一个堆内存，两个变量相互受影响，深拷贝使指，开辟一块内存空间，保存相同的值。互不受影响。</p>
            <h3 id="浅拷贝："><a href="#浅拷贝：" class="headerlink" title="浅拷贝："></a>浅拷贝：</h3>
            <p>Object.assign:，contact,扩展运算符等。</p>
            <h3 id="深拷贝："><a href="#深拷贝：" class="headerlink" title="深拷贝："></a>深拷贝：</h3>
            <h3 id="1-JSON"><a href="#1-JSON" class="headerlink" title="1.JSON"></a>1.JSON</h3>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">const obj &#x3D; &#123;</span><br><span class="line">  arr: [1, 1],</span><br><span class="line">  obj: &#123; key: 11 &#125;,</span><br><span class="line">  a: () &#x3D;&gt; &#123; &#125;,</span><br><span class="line">  date: new Date(),</span><br><span class="line">  reg: &#x2F;reg&#x2F;g,</span><br><span class="line">  null: null,</span><br><span class="line">  undefined: undefined</span><br><span class="line">&#125;</span><br><span class="line">obj1 &#x3D; JSON.parse(JSON.stringify(obj))</span><br><span class="line">console.log(obj1)</span><br><span class="line">console.log(obj1 &#x3D;&#x3D;&#x3D; obj)</span><br><span class="line">console.log(obj1.obj &#x3D;&#x3D;&#x3D; obj.obj)</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>输出结果</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">&#123;</span><br><span class="line">  arr: [ 1, 1 ],</span><br><span class="line">  obj: &#123; key: 11 &#125;,</span><br><span class="line">  date: &#39;2020-04-15T07:13:36.087Z&#39;,</span><br><span class="line">  reg: &#123;&#125;,</span><br><span class="line">  null: null</span><br><span class="line">&#125;</span><br><span class="line">false</span><br><span class="line">false</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>总结：输出结果发现，函数和undefine都不见了，正则变成一个空对象了。</p>
            <h3 id="2-递归-for-in"><a href="#2-递归-for-in" class="headerlink" title="2.递归+for in"></a>2.递归+for in</h3>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">function isObj (obj) &#123;</span><br><span class="line">  return (typeof obj &#x3D;&#x3D;&#x3D; &#39;object&#39; || typeof obj &#x3D;&#x3D;&#x3D; &#39;function&#39;) &amp;&amp; (obj !&#x3D;&#x3D; null)</span><br><span class="line">&#125;</span><br><span class="line">function clone (obj) &#123;</span><br><span class="line">  let tempobj &#x3D; Array.isArray(obj) ? [] : &#123;&#125;</span><br><span class="line">  for (let key in obj) &#123;</span><br><span class="line">    tempobj[key] &#x3D; isObj(obj[key]) ? clone(obj[key]) : obj[key]</span><br><span class="line">  &#125;</span><br><span class="line">  return tempobj</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">let a &#x3D; clone(obj)</span><br><span class="line">console.log(a &#x3D;&#x3D;&#x3D; obj)</span><br><span class="line">console.log(a)</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>结果：</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">false</span><br><span class="line">&#123;</span><br><span class="line">  arr: [ 1, 1 ],</span><br><span class="line">  obj: &#123; key: 11 &#125;,</span><br><span class="line">  a: &#123;&#125;,</span><br><span class="line">  date: &#123;&#125;,</span><br><span class="line">  reg: &#123;&#125;,</span><br><span class="line">  null: null,</span><br><span class="line">  undefined: undefined</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>总结：无法拷贝函数，正则，日期对象。</p>
            <h3 id="环"><a href="#环" class="headerlink" title="环"></a>环</h3>
            <p>环就是对象循环引用自己。比如：</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">a&#x3D;&#123;a：&#39;a&#39;&#125;</span><br><span class="line">a.c&#x3D;a</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>而使用上面两种方法拷贝就会直接报错的。所以我们就要借鉴WeakMap数据结构，每一次拷贝的时候就去先weakMap查询该对象是否已经被拷贝，如果已经拷贝取出该对象并返回，所以我们要改造一下clone函数：</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">function clone (obj, hash &#x3D; new WeakMap()) &#123;</span><br><span class="line">  if (hash.has(obj)) return hash.get(obj)</span><br><span class="line">  let tempobj &#x3D; Array.isArray(obj) ? [] : &#123;&#125;</span><br><span class="line">  hash.set(obj, tempobj)</span><br><span class="line">  for (let key in obj) &#123;</span><br><span class="line">    tempobj[key] &#x3D; isObj(obj[key]) ? clone((obj[key]), hash) : obj[key]</span><br><span class="line">  &#125;</span><br><span class="line">  return tempobj</span><br><span class="line">&#125;</span><br><span class="line">const obj &#x3D; &#123;&#125;</span><br><span class="line">obj.obj &#x3D; obj</span><br><span class="line">let a &#x3D; clone(obj)</span><br><span class="line">console.log(a)</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>结果：说明拷贝成功了，没有报错。</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">&#123; obj: [Circular] &#125;</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>解决一下，date,reg.</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">function clone (obj, hash &#x3D; new WeakMap()) &#123;</span><br><span class="line">  let tempobj, constructor</span><br><span class="line">  constructor &#x3D; obj.constructor</span><br><span class="line">  switch (constructor) &#123;</span><br><span class="line">    case RegExp:</span><br><span class="line">      tempobj &#x3D; new constructor(obj)</span><br><span class="line">      break;</span><br><span class="line">    case Date:</span><br><span class="line">      tempobj &#x3D; new constructor(obj)</span><br><span class="line">      break;</span><br><span class="line">    default:</span><br><span class="line">      if (hash.has(obj)) return hash.get(obj)</span><br><span class="line">      tempobj &#x3D; Array.isArray(obj) ? [] : &#123;&#125;</span><br><span class="line">      hash.set(obj, tempobj)</span><br><span class="line">  &#125;</span><br><span class="line">  for (let key in obj) &#123;</span><br><span class="line">    tempobj[key] &#x3D; isObj(obj[key]) ? clone((obj[key]), hash) : obj[key]</span><br><span class="line">  &#125;</span><br><span class="line">  return tempobj</span><br><span class="line">&#125;</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>结果：</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">&#123;</span><br><span class="line">  arr: [ 1, 1 ],</span><br><span class="line">  obj: [Circular],</span><br><span class="line">  a: [Function: a],</span><br><span class="line">  date: 2020-04-15T08:14:03.307Z,</span><br><span class="line">  reg: &#x2F;reg&#x2F;g,</span><br><span class="line">  null: null,</span><br><span class="line">  undefined: undefined</span><br><span class="line">&#125;</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>只剩下函数没有解决了。</p>
            <h2 id="12-高阶函数及柯里化"><a href="#12-高阶函数及柯里化" class="headerlink" title="12.高阶函数及柯里化"></a>12.高阶函数及柯里化</h2>
            <p>首先看一道面试题？</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">如何实现add(1)(2)(3)结果等于6</span><br><span class="line">const add &#x3D; x &#x3D;&gt; y &#x3D;&gt; z&#x3D;&gt;x+y+z</span><br><span class="line">add(1)(2)(3)    &#x2F;&#x2F;6</span><br><span class="line">一行代码就可以实现了。</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>高阶函数定义： 接收函数作为参数或者返回函数的函数。<br>所以常见的方法有：map,filter,bind,apply等。</p>
            <h3 id="接受参数为函数"><a href="#接受参数为函数" class="headerlink" title="接受参数为函数"></a>接受参数为函数</h3>
            <p>所以我们来实现一下map:</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">[1,2,3].map((item)&#x3D;&gt;item*2)   &#x2F;&#x2F;[2,4,6]</span><br><span class="line">map接受一个函数作为参数,并且返回一个新的数组</span><br><span class="line">Array.prototype.myMap&#x3D;function(fn)&#123;</span><br><span class="line">    let arr&#x3D;[]</span><br><span class="line">   　for(var i &#x3D; 0; i&lt;this.length; i++)&#123;</span><br><span class="line">        　arr.push(fn(this[i],i,this))     &#x2F;&#x2F;调用传入的参数</span><br><span class="line">    &#125;</span><br><span class="line">    return arr</span><br><span class="line">&#125;</span><br><span class="line">测试：</span><br><span class="line">[1,2,3].myMap((item)&#x3D;&gt;item*2)   &#x2F;&#x2F;[2,4,6]</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <h3 id="返回函数"><a href="#返回函数" class="headerlink" title="返回函数"></a>返回函数</h3>
            <h3 id="柯里化"><a href="#柯里化" class="headerlink" title="柯里化"></a>柯里化</h3>
            <p>定义：是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">再来看看之前的面试题：</span><br><span class="line">如何实现add(1)(2)(3)结果等于6?</span><br><span class="line">如果参数是100个呢，难道要写100次吗，如果参数是未知的呢，所以这个写法没有通用性。</span><br><span class="line">例如：</span><br><span class="line">add(1)(2)(3)                </span><br><span class="line">add(1, 2, 3)(4)           </span><br><span class="line">add(1)(2)(3)(4)(5)          </span><br><span class="line">add(2, 6)(1)</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>分析：首先我们做的要把所有参数收集起来，然后进行统一处理。</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">function add() &#123;</span><br><span class="line">    &#x2F;&#x2F; 第一次执行时，定义一个数组专门用来存储所有的参数</span><br><span class="line">    var _args &#x3D; Array.prototype.slice.call(arguments)</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 在内部声明一个函数，利用闭包的特性保存_args并收集所有的参数值</span><br><span class="line">    var _adder &#x3D; function() &#123;</span><br><span class="line">        _args.push(...Array.from(arguments))</span><br><span class="line">        return _adder</span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 利用toString隐式转换的特性，当最后执行时隐式转换，并计算最终的值返回</span><br><span class="line">    _adder.toString &#x3D; function () &#123;</span><br><span class="line">        return _args.reduce(function (a, b) &#123;</span><br><span class="line">            return a + b;</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">    return _adder;</span><br><span class="line">&#125;</span><br><span class="line">测试：</span><br><span class="line">console.log(add(1)(2)(3))                &#x2F;&#x2F; 6</span><br><span class="line">console.log(add(1, 2, 3)(4))             &#x2F;&#x2F; 10</span><br><span class="line">console.log(add(1)(2)(3)(4)(5))          &#x2F;&#x2F; 15</span><br><span class="line"></span><br><span class="line">注意：</span><br><span class="line">只有在对该函数取值时，才会进行类型转换，才会调用toString返回相加的值</span><br><span class="line">否则只是调用则返回函数而不是相加值</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <h2 id="13-ajax"><a href="#13-ajax" class="headerlink" title="13.ajax"></a>13.ajax</h2>
            <p>ajax是一系列技术的统称，实现向服务器发送数据接受数据而页面不刷新。</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">const xhr &#x3D; new XMLHttpRequest()</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>XMLHttpRequest是浏览器提供的一个api,在js中，也就是一个构造函数。</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">简单完成一个ajax请求：</span><br><span class="line">const xhr &#x3D; new XMLHttpRequest()</span><br><span class="line">xhr.onreadystatechange &#x3D; () &#x3D;&gt; &#123;</span><br><span class="line">    if (xhr.readystate &#x3D;&#x3D; 4) &#123;</span><br><span class="line">        if ((xhr.status &gt;&#x3D; 200 &amp;&amp; xhr.status &lt; 300) || xhr.status &#x3D;&#x3D; 304) &#123;</span><br><span class="line">            alert(xhr.responseText)</span><br><span class="line">        &#125; else &#123;</span><br><span class="line">            alert(xhr.status)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">xhr.open(&quot;get&quot;, &quot;user&quot;, true)</span><br><span class="line">xhr.send(null)</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>readystate为实例的属性：</p>
            <ul>
              <li>0：未初始化 – 尚未调用.open()方法</li>
              <li>1：启动 – 已经调用.open()方法，但尚未调用.send()方法；</li>
              <li>2：发送 – 已经调用.send()方法，但尚未接收到响应；</li>
              <li>3：接收 – 已经接收到部分响应数据；</li>
              <li>4：完成 – 已经接收到全部响应数据，而且已经可以在客户端使用了；</li>
            </ul>
            <p>status为响应状态码（http状态），和readystate不同。</p>
            <h3 id="取消异步"><a href="#取消异步" class="headerlink" title="取消异步"></a>取消异步</h3>
            <p>ajax也可以取消事件监听,将异步改为同步，调用abort()</p>
            <h3 id="progress进度："><a href="#progress进度：" class="headerlink" title="progress进度："></a>progress进度：</h3>
            <ul>
              <li>loadstart：在接收到响应数据的第一个字节时触发</li>
              <li>progress：在接收响应期间持续不断地触发</li>
              <li>error：在请求发生错误时触发；</li>
              <li>load：在接收到完整的响应数据时触发；</li>
              <li>oadend：在通信完成或者触发error，abort或load事件后触发</li>
            </ul>
            <h2 id="14-DOM"><a href="#14-DOM" class="headerlink" title="14.DOM"></a>14.DOM</h2>
            <h3 id="dom元素的增删改查"><a href="#dom元素的增删改查" class="headerlink" title="dom元素的增删改查"></a>dom元素的增删改查</h3>
            <h3 id="增-添加dom元素"><a href="#增-添加dom元素" class="headerlink" title="增:添加dom元素"></a>增:添加dom元素</h3>
            <ul>
              <li>appendChild：向当前节点的子节点列表的末尾添加新的子节点</li>
              <li>insertBefore(newchild，refchild):其中参数newchiild表示插入新的节点，refchild表示在此节点前插入新的子节点，返回新的子节点：</li>
            </ul>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">document.body.insertAdjacentHTML(</span><br><span class="line">  &#39;beforeend&#39;,</span><br><span class="line">  &#39;&lt;a&gt;你好&lt;&#x2F;a&gt;&#39;</span><br><span class="line">)</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>这个方法允许你将任何有效的 HTML 字符串插入到一个 DOM 元素的四个位置，这四个位置由方法的第一个参数指定，分别是：</p>
            <ul>
              <li>‘beforebegin’: 元素之前</li>
              <li>‘afterbegin’: 元素内，位于现存的第一个子元素之前</li>
              <li>‘beforeend’: 元素内，位于现存的最后一个子元素之后</li>
              <li>‘afterend’: 元素之后</li>
            </ul>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">&lt;!-- beforebegin --&gt;</span><br><span class="line">&lt;div&gt;</span><br><span class="line">  &lt;!-- afterbegin --&gt;</span><br><span class="line">  &lt;span&gt;&lt;&#x2F;span&gt;</span><br><span class="line">  &lt;!-- beforeend --&gt;</span><br><span class="line">&lt;&#x2F;div&gt;</span><br><span class="line">&lt;!-- afterend --</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <h3 id="删除dom元素"><a href="#删除dom元素" class="headerlink" title="删除dom元素"></a>删除dom元素</h3>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">方法1：</span><br><span class="line">const target &#x3D; document.querySelector(&#39;.target&#39;)</span><br><span class="line">target.parentNode.removeChild(target)</span><br><span class="line">方法2：</span><br><span class="line">const target &#x3D; document.querySelector(&#39;#target&#39;)</span><br><span class="line">target.remove()</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <h3 id="移动dom"><a href="#移动dom" class="headerlink" title="移动dom:"></a>移动dom:</h3>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">&lt;h1&gt;frist&lt;&#x2F;h1&gt;</span><br><span class="line">&lt;p&gt;1&lt;&#x2F;p&gt;</span><br><span class="line">&lt;h2&gt;two&lt;&#x2F;h2&gt;</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>运用之前的insertAdjacentHTML方法：</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">const h1 &#x3D; document.querySelector(&#39;h1&#39;)</span><br><span class="line">const h2 &#x3D; document.querySelector(&#39;h2&#39;)</span><br><span class="line">h1.insertAdjacentElement(&#39;afterend&#39;, h2)</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>结果：</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">&lt;h1&gt;frist&lt;&#x2F;h1&gt;</span><br><span class="line">&lt;h2&gt;two&lt;&#x2F;h2&gt;</span><br><span class="line">&lt;p&gt;1&lt;&#x2F;p&gt;</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <h3 id="替换dom元素"><a href="#替换dom元素" class="headerlink" title="替换dom元素"></a>替换dom元素</h3>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">parentNode.replaceChild(newNode, oldNode)</span><br><span class="line"></span><br><span class="line">oldElement.replaceWith(newElement)</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <h3 id="dom检测："><a href="#dom检测：" class="headerlink" title="dom检测："></a>dom检测：</h3>
            <ul>
              <li>matches：以判断出一个元素是否匹配一个确定的选择器</li>
              <li>contains:可以检测出一个元素是否包含另一个元素</li>
            </ul>
            <h3 id="dom观察者：MutationObserver"><a href="#dom观察者：MutationObserver" class="headerlink" title="dom观察者：MutationObserver"></a>dom观察者：MutationObserver</h3>
            <p>在处理用户交互的时候，当前页面的 DOM 元素通常会发生很多变化，而有些场景需要开发者们监听这些变化并在触发后执行相应的操作。MutationObserver 是浏览器提供的一个专门用来监听 DOM 变化的接口，它强大到几乎可以观测到一个元素的所有变化，可观测的对象包括：文本的改变、子节点的添加和移除和任何元素属性的变化。 如同往常一样，如果想构造任何一个对象，那就 new 它的构造函数：</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">const observer &#x3D; new MutationObserver(callback)</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>复制代码传入构造函数的是一个回调函数，它会在被监听的 DOM 元素发生改变时执行，它的两个参数分别是：包含本次所有变更的列表 MutationRecords 和 observer 本身。其中，MutationRecords 的每一条都是一个变更记录，它是一个普通的对象，包含如下常用属性：</p>
            <ul>
              <li>type: 变更的类型，attributes / characterData / childList</li>
              <li>target: 发生变更的 DOM 元素</li>
              <li>addedNodes: 新增子元素组成的 NodeList</li>
              <li>removedNodes: 已移除子元素组成的的 NodeList</li>
              <li>attributeName: 值发生改变的属性名，如果不是属性变更，则返回 null</li>
              <li>previousSibling: 被添加或移除的子元素之前的兄弟节点</li>
              <li>nextSibling: 被添加或移除的子元素之后的兄弟节点</li>
            </ul>
            <p>根据目前的信息，可以写一个 callback 函数了：</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">const callback &#x3D; (mutationRecords, observer) &#x3D;&gt; &#123;</span><br><span class="line">  mutationRecords.forEach(&#123;</span><br><span class="line">    type,</span><br><span class="line">    target,</span><br><span class="line">    attributeName,</span><br><span class="line">    oldValue,</span><br><span class="line">    addedNodes,</span><br><span class="line">    removedNodes,</span><br><span class="line">  &#125; &#x3D;&gt; &#123;</span><br><span class="line">   switch(type) &#123;</span><br><span class="line">      case &#39;attributes&#39;:</span><br><span class="line">        console.log(&#96;attribute $&#123;attributeName&#125; changed&#96;)</span><br><span class="line">        console.log(&#96;previous value: $&#123;oldValue&#125;&#96;)</span><br><span class="line">        console.log(&#96;current value: $&#123;target.getAttribite(attributeName)&#125;&#96;)</span><br><span class="line">        break</span><br><span class="line">      case &#39;childList&#39;:</span><br><span class="line">        console.log(&#39;child nodes changed&#39;)</span><br><span class="line">        console.log(&#39;added: $&#123;addedNodes&#125;&#39;)</span><br><span class="line">        console.log(&#39;removed: $&#123;removedNodes&#125;&#39;)</span><br><span class="line">        break</span><br><span class="line">      &#x2F;&#x2F; ...</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>复制代码至此，我们有了一个 DOM 观察者 observer，也有了一个完整可用的 DOM 变化后的回调函数 callback，就差一个需要被观测的 DOM 元素了：</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">const target &#x3D; document.querySelector(&#39;#target&#39;)</span><br><span class="line">observer.observe(target, &#123;</span><br><span class="line">  attributes: true,</span><br><span class="line">  attributeFilter: [&#39;class&#39;],</span><br><span class="line">  attributesOldValue: true,</span><br><span class="line">  childList: true,</span><br><span class="line">&#125;)</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>复制代码在上面的代码中，我们通过调用观察者对象的 observe 方法，对 id 为 target 的 DOM 元素进行了观测（第一个参数就是需要观测的目标元素），而第二个元素，我们传入了一个配置对象：开启对属性的观测 / 只观测 class 属性 / 属性变化时传递属性旧值 / 开启对子元素列表的观测。 配置对象支持如下字段：</p>
            <ul>
              <li>attributes: Boolean，是否监听元素属性的变化</li>
              <li>attributeFilter: String[]，需要监听的特定属性名称组成的数组</li>
              <li>attributeOldValue: Boolean，当监听元素的属性发生变化时，是否记录并传递属性的上一个值</li>
              <li>characterData: Boolean，是否监听目标元素或子元素树中节点所包含的字符数据的变化</li>
              <li>characterDataOldValue: Boolean，字符数据发生变化时，是否记录并传递其上一个值</li>
              <li>childList: Boolean，是否监听目标元素添加或删除子元素</li>
              <li>subtree: Boolean，是否扩展监视范围到目标元素下的整个子树的所有元素</li>
            </ul>
            <p>当不再监听目标元素的变化时，调用 observer 的 disconnect 方法即可，如果需要的话，可以先调用 observer 的 takeRecords 方法从 observer 的通知队列中删除所有待处理的通知，并将它们返回到一个由 MutationRecord 对象组成的数组当中：</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">const mutationRecords &#x3D; observer.takeRecords()</span><br><span class="line">callback(mutationRecords)</span><br><span class="line">observer.disconnect()</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <h2 id="15-BOM"><a href="#15-BOM" class="headerlink" title="15.BOM"></a>15.BOM</h2>
            <p>BOM为浏览器对象模型，接下来一一来回顾。</p>
            <h3 id="Window"><a href="#Window" class="headerlink" title="Window"></a>Window</h3>
            <p>所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。</p>
            <p>全局变量是 window 对象的属性。</p>
            <p>全局函数是 window 对象的方法。</p>
            <p>甚至 HTML DOM 的 document 也是 window 对象的属性之一：</p>
            <ul>
              <li>window.innerHeight - 浏览器窗口的内部高度(包括滚动条)</li>
              <li>window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)</li>
              <li>window.open() - 打开新窗口</li>
              <li>window.close() - 关闭当前窗口</li>
              <li>window.moveTo() - 移动当前窗口</li>
              <li>window.resizeTo() - 调整当前窗口的尺寸</li>
            </ul>
            <p>全局变量不能通过 delete 操作符删除；而 window 属性上定义的变量可以通过 delete 删除</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">var num&#x3D;123;</span><br><span class="line">window.str&#x3D;&quot;string&quot;;</span><br><span class="line">delete num;</span><br><span class="line">delete str;</span><br><span class="line">console.log(num); &#x2F;&#x2F;123</span><br><span class="line"></span><br><span class="line">console.log(str); &#x2F;&#x2F;str is not defined</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>访问未声明的变量会抛出错误，但是通过查询 window 对象，可以知道某个可能未声明的变量是否存在。</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">var newValue&#x3D;oldValue; &#x2F;&#x2F; 报错：oldValue is not defined</span><br><span class="line">var newValue&#x3D;window.oldValue; &#x2F;&#x2F; 不会报错</span><br><span class="line">console.log(newValue); &#x2F;&#x2F; undefined</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <h3 id="screen"><a href="#screen" class="headerlink" title="screen"></a>screen</h3>
            <ul>
              <li>screen.availWidth - 可用的屏幕宽度</li>
              <li>screen.availHeight - 可用的屏幕高度</li>
            </ul>
            <h3 id="location"><a href="#location" class="headerlink" title="location"></a>location</h3>
            <p>window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。</p>
            <ul>
              <li>location.href 返回当前页面的url</li>
              <li>location.hostname 返回 web 主机的域名</li>
              <li>location.pathname 返回当前页面的路径和文件名</li>
              <li>location.port 返回 web 主机的端口 （80 或 443）</li>
              <li>location.protocol 返回所使用的 web 协议（http: 或 https:）</li>
            </ul>
            <p>window.location.assign(url) ： 加载 URL 指定的新的 HTML 文档。 就相当于一个链接，跳转到指定的url，当前页面会转为新页面内容，可以点击后退返回上一个页面。</p>
            <p>window.location.replace(url) ： 通过加载 URL 指定的文档来替换当前文档 ，这个方法是替换当前窗口页面，前后两个页面共用一个窗口，所以是没有后退返回上一页的</p>
            <h3 id="history"><a href="#history" class="headerlink" title="history"></a>history</h3>
            <p>window.history 对象包含浏览器的历史</p>
            <ul>
              <li>history.back() - 与在浏览器点击后退按钮相同</li>
              <li>history.forward() - 与在浏览器中点击向前按钮相同</li>
              <li>history.go(index):index表示前进后退的步数，0表示刷新页面</li>
            </ul>
            <h3 id="navigator"><a href="#navigator" class="headerlink" title="navigator"></a>navigator</h3>
            <p>window.navigator 对象包含有关访问者浏览器的信息</p>
            <h2 id="16-包装对象"><a href="#16-包装对象" class="headerlink" title="16.包装对象"></a>16.包装对象</h2>
            <p>JS中有三个基本数据类型是比较特殊的存在，分别是String、number、Boolear，这个三个基本是由自己对应的包装对象。并且随时等候召唤。</p>
            <p>包装对象：</p>
            <p>其实就是对象，在对基本类型数据进行操作时，首先会创建一个相应的对象代替，操作完之后并删除。</p>
            <p>区别：</p>
            <p>引用类型和基本包装对象的区别在于，生存期，引用类型所创建的对象，在执行期间一直在内存中，而基本包装对象只是存在一瞬间（也就是执行完后变量就变成null）。</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">var a&#x3D;&#39;aa&#39;</span><br><span class="line">typeof a &#x2F;&#x2F; &#39;string&#39;</span><br><span class="line">a.slice(1)  &#x2F;&#x2F;&#39;a&#39;</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>a是一个基本类型的数据，是不具备任何方法的，但是我们可以调用slice方法<br>这个时候就是被包装了一层对象。<br>居然是对象的话，我们可以添加属性</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">a.name&#x3D;&#39;aaa&#39;</span><br><span class="line">console.log(a.name)   &#x2F;&#x2F;undefined</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>但是访问却访问不到，就像之前说的，包装对象在进行操作完就删除了，也就是说，a.name只存在了一瞬间。</p>
            <h2 id="17-封装，多态"><a href="#17-封装，多态" class="headerlink" title="17.封装，多态"></a>17.封装，多态</h2>
            <h3 id="多态："><a href="#多态：" class="headerlink" title="多态："></a>多态：</h3>
            <p>多态就是通过对传递的参数判断来执行逻辑，即可实现一种多态处理机制。</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">function args(...args)&#123;</span><br><span class="line">if(Array.from(args).length&#x3D;&#x3D;1)&#123;</span><br><span class="line">    console.log(&#39;一个参数&#39;)</span><br><span class="line">    &#125;</span><br><span class="line">if(Array.from(args).length&#x3D;&#x3D;2)&#123;</span><br><span class="line">    console.log(&#39;二个参数&#39;)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <h3 id="封装"><a href="#封装" class="headerlink" title="封装"></a>封装</h3>
            <p>封装就是把客观事物封装成抽象的类，隐藏属性和方法的实现细节，仅对外公开接口。也就是说，封装就是将属性和方法组成一个类的过程就称之为封装。</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">子面量：</span><br><span class="line">var a&#x3D;&#123;</span><br><span class="line">    name:&#39;nihao&#39;,</span><br><span class="line">    do:function()&#123;&#125;</span><br><span class="line">&#125;</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <ul>
              <li>优点：代码简单易懂</li>
              <li>缺点：创建多个对象会产生大量的代码，编写麻烦，且并没有实例与原型的概念</li>
            </ul>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">工厂模式:</span><br><span class="line">function createPerson(name, age) &#123;</span><br><span class="line">  var person &#x3D; new Object();</span><br><span class="line">  person.name &#x3D; name;</span><br><span class="line">  person.age &#x3D; age;</span><br><span class="line"></span><br><span class="line">  person.do&#x3D; function() &#123;</span><br><span class="line">    alert(&#39;hello word!&#39;);</span><br><span class="line">  &#125;;</span><br><span class="line">  return person;</span><br><span class="line">&#125;</span><br><span class="line">const person1&#x3D;createPerson(&#39;curry&#39;,31)</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <ul>
              <li>优点：避免创建大量对象时代码的臃肿</li>
              <li>缺点： p1与p2之间没有内在联系</li>
            </ul>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">构造函数：</span><br><span class="line">function Person(name, age) &#123;</span><br><span class="line">    &#x2F;&#x2F; 通过this来添加属性方法</span><br><span class="line">    this.name &#x3D; name </span><br><span class="line">    this.age &#x3D; age</span><br><span class="line"></span><br><span class="line">    this.action &#x3D; function () &#123;</span><br><span class="line">        alert(&#39;hello word&#39;)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; 实例化对象</span><br><span class="line">var p1 &#x3D; new Person(&#39;尤雨溪&#39;, 18)</span><br><span class="line">var p2 &#x3D; new Person(&#39;阮一峰&#39;, 20)</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <ul>
              <li>优点：实例化对象和构造函数之间存在关联</li>
              <li>缺点：浪费内存，构造函数中定义的方法名action一样，但实例化出来的对象名不一样，造成一个内存的浪费</li>
            </ul>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">原型模式:</span><br><span class="line">function Person(name, age) &#123;</span><br><span class="line">    &#x2F;&#x2F; 通过this来添加属性方法</span><br><span class="line">    this.name &#x3D; name </span><br><span class="line">    this.age &#x3D; age</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 将共同拥有的方法挂在到原型上</span><br><span class="line">Person.prototype.action &#x3D; function () &#123;</span><br><span class="line">        alert(&#39;hello wodr&#39;)</span><br><span class="line">    &#125;</span><br><span class="line">&#x2F;&#x2F; 实例化对象</span><br><span class="line">var p1 &#x3D; new Person(&#39;尤雨溪&#39;, 18)</span><br><span class="line">var p2 &#x3D; new Person(&#39;阮一峰&#39;, 20)</span><br><span class="line"></span><br><span class="line">p1.action()</span><br><span class="line">p2.action()</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <h2 id="18-异常捕获try-catch"><a href="#18-异常捕获try-catch" class="headerlink" title="18.异常捕获try catch"></a>18.异常捕获try catch</h2>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">面试题：js异常能否被try catch扑捉到？</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>正确答案：只有在线程执行已经进入try catch未执行完的时候抛出来的的异常可以捕捉的到。 也就是说只能捕获同步js代码的错误。</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">示例1：</span><br><span class="line">try&#123;</span><br><span class="line">    c.</span><br><span class="line">&#125;catch(e)&#123;</span><br><span class="line">    console.log(&quot;error&quot;,e);</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; output</span><br><span class="line">Uncaught SyntaxError: Unexpected token &#39;&#125;&#39;</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>代码报错的时候，线程执行未进入 try catch，那么无法捕捉异常。</p>
            <p>比如语法异常（syntaxError），因为语法异常是在语法检查阶段就报错了，线程执行尚未进入 try catch 代码块，自然就无法捕获到异常。</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">示例2：</span><br><span class="line">try&#123;</span><br><span class="line">    setTimeout(a,100)</span><br><span class="line">&#125;catch(e)&#123;</span><br><span class="line">     console.log(&quot;error&quot;,e);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">Uncaught ReferenceError: a is not defined</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>setTimeout 里面报错，实际上是 100ms 之后执行的代码报错，此时代码块 try catch 已经执行完成，111 都已经被执行了，故无法捕捉异常。</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">可以捕获到：</span><br><span class="line">try&#123;</span><br><span class="line">     function d()&#123;a.b;&#125;</span><br><span class="line">   d();</span><br><span class="line">&#125;catch(e)&#123;</span><br><span class="line">     console.log(&quot;error&quot;,e);</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; error ReferenceError: a is not defined</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>promise的异常直接用catch捕获就好，不用在使用try catch包裹。</p>
            <h2 id="19-单线程和事件循环"><a href="#19-单线程和事件循环" class="headerlink" title="19.单线程和事件循环"></a>19.单线程和事件循环</h2>
            <h3 id="单线程"><a href="#单线程" class="headerlink" title="单线程"></a>单线程</h3>
            <p>js是运行在浏览器里面的，而浏览器是多进程多线程的。但是分配给Js,只有一个线程。因为Js可以操作dom,所以js和dom渲染一定是互斥。不然又是dom渲染，又是js操作dom,那么浏览器到底听谁的呢。多线程也会带来相应的复杂程度。</p>
            <p>单线程特点是：任务依次执行，后面的必须等前面的任务完成后，才能执行下一个任务。<br>假如一个任务需要花费大量时间，那后面的任务都要等待，那这语言也太不行了。所以有了<strong>异步任务和回调函数</strong>。意思就是说，这个耗时的任务交给其他线程来执行，当任务执行完后，触发回调函数即可。所以就不阻碍js同步任务的执行。<br>现在又要一个问题，这些回掉函数是如何执行的，执行顺序又是如何？</p>
            <h3 id="事件循环"><a href="#事件循环" class="headerlink" title="事件循环"></a>事件循环</h3>
            <p>浏览器维护了一个事件队列，当主线程任务执行完成后，每隔相应的时间就会来事件队列查看，看看有咩有需要执行的任务。任务又分为宏任务和微任务，宏任务快于微任务。</p>
            <ul>
              <li>
                <p>常见的宏任务：script（整体代码）、setTimeout、setInterval、I/O、setImmedidate，ajax</p>
              </li>
              <li>
                <p>常见的微任务：process.nextTick、MutationObserver、Promise.then catch finally</p>
                <p><img src="" data-original="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8eb99043b5c2426ea25fe3ea31300f6a~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p>
                <p>整体的执行顺序如上图所示：</p>
              </li>
              <li>
                <p>先执行一个宏任务</p>
              </li>
              <li>
                <p>检查是否有微任务，全部执行。（微任务产生的微任务也会全部执行）,然后清空微任务队列</p>
              </li>
              <li>
                <p>渲染 -开启下一个宏任务 说的多不如做的多：</p>
              </li>
            </ul>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">例1：</span><br><span class="line">&#x2F;&#x2F; 作者 ：凉玉</span><br><span class="line">setTimeout(()&#x3D;&gt;&#123;</span><br><span class="line">    console.log(&#39;timer1&#39;)</span><br><span class="line"></span><br><span class="line">    Promise.resolve().then(function() &#123;</span><br><span class="line">        console.log(&#39;promise1&#39;)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;, 0)</span><br><span class="line">&#x2F;&#x2F; 简称set2</span><br><span class="line">setTimeout(()&#x3D;&gt;&#123;</span><br><span class="line">    console.log(&#39;timer2&#39;)</span><br><span class="line"></span><br><span class="line">    Promise.resolve().then(function() &#123;</span><br><span class="line">        console.log(&#39;promise2&#39;)</span><br><span class="line">    &#125;)</span><br><span class="line">    &#x2F;&#x2F; 简称set3</span><br><span class="line">    setTimeout(() &#x3D;&gt; &#123;</span><br><span class="line">        console.log(&#39;timer3&#39;)</span><br><span class="line">    &#125;, 0)</span><br><span class="line">&#125;, 0)</span><br><span class="line"></span><br><span class="line">Promise.resolve().then(function() &#123;</span><br><span class="line">    console.log(&#39;promise3&#39;)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">console.log(&#39;start&#39;)</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>运行的过程</p>
            <p>循环一</p>
            <ul>
              <li>1、将脚本任务放入到task队列。</li>
              <li>2、从task中取出一个任务运行，运行的结果是将set1和set2放入到task中，将promise.then放入到microtask中，输出start。</li>
              <li>3、检查microtask checkpoint，看microtask队列中是否有任务。</li>
              <li>4、运行microtask中所有的任务，输出promise3。</li>
              <li>5、清空microtask队列之后，进入下一个循环。</li>
            </ul>
            <p>循环二</p>
            <ul>
              <li>1、从task中在取出一个set1任务，运行的结果是输出timer1，将promise.then放入到microtask队列中。</li>
              <li>2、检查microtask checkpoint，看microtask队列中是否有任务。</li>
              <li>3、运行microtask中所有的任务，输出promise1。</li>
              <li>4、清空microtask队列之后，进入下一个循环。</li>
            </ul>
            <p>循环三</p>
            <ul>
              <li>1、从task中在取出一个set2任务，运行的结果是输出timer2，将promise.then放入到microtask队列中，将set3放入到task队列中。</li>
              <li>2、检查microtask checkpoint，看microtask队列中是否有任务。</li>
              <li>3、运行microtask中所有的任务，输出promise2。</li>
              <li>4、清空microtask队列之后，进入下一个循环。</li>
            </ul>
            <p>循环四</p>
            <ul>
              <li>1、从task中在取出一个set3任务，运行的结果是输出timer3</li>
              <li>2、检查microtask checkpoint，看microtask队列中没有任务，进入下一个循环。</li>
            </ul>
            <p>循环五</p>
            <ul>
              <li>检测task队列和microtask队列都为空，WorkerGlobalScope对象中closing标志位为true，销毁event loop。</li>
            </ul>
            <p>输出的结果</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">start</span><br><span class="line">promise3</span><br><span class="line">timer1</span><br><span class="line">promise1</span><br><span class="line">timer2</span><br><span class="line">promise2</span><br><span class="line">timer3</span><br><span class="line">复制代码</span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <h2 id="20-promise"><a href="#20-promise" class="headerlink" title="20.promise"></a>20.promise</h2>
            <p><a target="_blank" rel="noopener" href="https://es6.ruanyifeng.com/#docs/promise">阮一峰老师精讲promise</a></p>
            <h2 id="21-es6模块化"><a href="#21-es6模块化" class="headerlink" title="21.es6模块化"></a>21.es6模块化</h2>
            <p><a target="_blank" rel="noopener" href="https://es6.ruanyifeng.com/#docs/module">阮一峰老师精讲es6模块化</a></p>
            <h1 id="总结："><a href="#总结：" class="headerlink" title="总结："></a>总结：</h1>
            <p>希望我的文章对大家有帮助哦，剩下两篇文章一周之内也都会发布的，基本也完成的差不多了，希望大家多多支持</p>
            <hr>
            <p>原文作者：liu6<br>原文链接：<a href="https://link.zhihu.com/?target=https://juejin.im/post/6865184344990810126">https://juejin.im/post/6865184344990810126</a><br>原文来源：掘金</p>

          </div>





          <footer class="post-footer">
            <div class="post-tags">
              <a href="/tags/JavaScript/" rel="tag"># JavaScript</a>
            </div>



            <div class="post-nav">
              <div class="post-nav-item">
                <a href="/blob/2020-09-09-rollup-uses-the-plug-in-rollup-plugin-babel-of-babel-7-version-to-report-errors/" rel="prev" title="rollup 使用babel7版本的插件rollup-plugin-babel报错解决办法">
                  <i class="fa fa-chevron-left"></i> rollup 使用babel7版本的插件rollup-plugin-babel报错解决办法
                </a>
              </div>
              <div class="post-nav-item">
                <a href="/blob/2020-10-10-using-forever-to-manage-under-linux/" rel="next" title="linux下使用forever进行管理">
                  linux下使用forever进行管理 <i class="fa fa-chevron-right"></i>
                </a>
              </div>
            </div>
          </footer>
        </article>
      </div>







      <script>
        window.addEventListener('tabs:register', () => {
          let {
            activeClass
          } = CONFIG.comments;
          if (CONFIG.comments.storage) {
            activeClass = localStorage.getItem('comments_active') || activeClass;
          }
          if (activeClass) {
            const activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
            if (activeTab) {
              activeTab.click();
            }
          }
        });
        if (CONFIG.comments.storage) {
          window.addEventListener('tabs:click', event => {
            if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
            const commentClass = event.target.classList[1];
            localStorage.setItem('comments_active', commentClass);
          });
        }
      </script>
    </div>
  </main>

  <footer class="footer">
    <div class="footer-inner">


      <div class="copyright">
        &copy;
        <span itemprop="copyrightYear">2021</span>
        <span class="with-love">
          <i class="fa fa-heart"></i>
        </span>
        <span class="author" itemprop="copyrightHolder">holidaypenguin</span>
      </div>
      <div class="powered-by">由 <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/mist/" class="theme-link" rel="noopener" target="_blank">NexT.Mist</a> 强力驱动
      </div>

    </div>
  </footer>


  <script size="300" alpha="0.1" zIndex="-1" src="https://cdn.jsdelivr.net/npm/ribbon.js@1.0.2/dist/ribbon.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
  <script src="/js/love.js"></script>

  <script src="/js/development.js"></script>
  <script src="/js/utils.js"></script>
  <script src="/js/motion.js"></script>
  <script src="/js/schemes/muse.js"></script>
  <script src="/js/next-boot.js"></script>


  <script src="/js/local-search.js"></script>









  <script>
    (function() {
      function leancloudSelector(url) {
        url = encodeURI(url);
        return document.getElementById(url).querySelector('.leancloud-visitors-count');
      }

      function addCount(Counter) {
        const visitors = document.querySelector('.leancloud_visitors');
        const url = decodeURI(visitors.id);
        const title = visitors.dataset.flagTitle;

        Counter('get', '/classes/Counter?where=' + encodeURIComponent(JSON.stringify({
            url
          })))
          .then(response => response.json())
          .then(({
            results
          }) => {
            if (results.length > 0) {
              const counter = results[0];
              leancloudSelector(url).innerText = counter.time + 1;
              Counter('put', '/classes/Counter/' + counter.objectId, {
                  time: {
                    '__op': 'Increment',
                    'amount': 1
                  }
                })
                .catch(error => {
                  console.error('Failed to save visitor count', error);
                });
            } else {
              Counter('post', '/classes/Counter', {
                  title,
                  url,
                  time: 1
                })
                .then(response => response.json())
                .then(() => {
                  leancloudSelector(url).innerText = 1;
                })
                .catch(error => {
                  console.error('Failed to create', error);
                });
            }
          })
          .catch(error => {
            console.error('LeanCloud Counter Error', error);
          });
      }

      function showTime(Counter) {
        const visitors = document.querySelectorAll('.leancloud_visitors');
        const entries = [...visitors].map(element => {
          return decodeURI(element.id);
        });

        Counter('get', '/classes/Counter?where=' + encodeURIComponent(JSON.stringify({
            url: {
              '$in': entries
            }
          })))
          .then(response => response.json())
          .then(({
            results
          }) => {
            for (let url of entries) {
              const target = results.find(item => item.url === url);
              leancloudSelector(url).innerText = target ? target.time : 0;
            }
          })
          .catch(error => {
            console.error('LeanCloud Counter Error', error);
          });
      }

      const {
        app_id,
        app_key,
        server_url
      } = {
        "enable": true,
        "app_id": "povuqNsSqFodlakVIwtEX5kb-gzGzoHsz",
        "app_key": "zXD40RDtDB3DMtpC89k0AK7g",
        "server_url": null,
        "security": false
      };

      function fetchData(api_server) {
        const Counter = (method, url, data) => {
          return fetch(`${api_server}/1.1${url}`, {
            method,
            headers: {
              'X-LC-Id': app_id,
              'X-LC-Key': app_key,
              'Content-Type': 'application/json',
            },
            body: JSON.stringify(data)
          });
        };
        if (CONFIG.page.isPost) {
          if (CONFIG.hostname !== location.hostname) return;
          addCount(Counter);
        } else if (document.querySelectorAll('.post-title-link').length >= 1) {
          showTime(Counter);
        }
      }

      const api_server = app_id.slice(-9) === '-MdYXbMMI' ? `https://${app_id.slice(0, 8).toLowerCase()}.api.lncldglobal.com` : server_url;

      if (api_server) {
        fetchData(api_server);
      } else {
        fetch('https://app-router.leancloud.cn/2/route?appId=' + app_id)
          .then(response => response.json())
          .then(({
            api_server
          }) => {
            fetchData('https://' + api_server);
          });
      }
    })();
  </script>



<script>
            window.imageLazyLoadSetting = {
                isSPA: false,
                preloadRatio: 1,
                processImages: null,
            };
        </script><script>window.addEventListener("load",function(){var t=/\.(gif|jpg|jpeg|tiff|png)$/i,r=/^data:image\/[a-z]+;base64,/;Array.prototype.slice.call(document.querySelectorAll("img[data-original]")).forEach(function(a){var e=a.parentNode;"A"===e.tagName&&(e.href.match(t)||e.href.match(r))&&(e.href=a.dataset.original)})});</script><script>!function(n){n.imageLazyLoadSetting.processImages=o;var e=n.imageLazyLoadSetting.isSPA,i=n.imageLazyLoadSetting.preloadRatio||1,r=Array.prototype.slice.call(document.querySelectorAll("img[data-original]"));function o(){e&&(r=Array.prototype.slice.call(document.querySelectorAll("img[data-original]")));for(var t,a=0;a<r.length;a++)0<=(t=(t=r[a]).getBoundingClientRect()).bottom&&0<=t.left&&t.top<=(n.innerHeight*i||document.documentElement.clientHeight*i)&&function(){var t,e,n,i,o=r[a];t=o,e=function(){r=r.filter(function(t){return o!==t})},n=new Image,i=t.getAttribute("data-original"),n.onload=function(){t.src=i,e&&e()},t.src!==i&&(n.src=i)}()}o(),n.addEventListener("scroll",function(){var t,e;t=o,e=n,clearTimeout(t.tId),t.tId=setTimeout(function(){t.call(e)},500)})}(this);</script></body>

</html>